[BUG] Minimal view as starting view not using correct theme

[DBLouis]

Environment

Self-Hosted (Docker)

System

Firefox 125, Ubuntu 23.10, Docker 26.1.3

Version

3.1.0

Describe the problem

I want to have the minimal view as starting view, so I set the environment variable VUE_APP_STARTING_VIEW to minimal. The starting view is indeed the minimal view but the theme I set in my config is not set, it uses the default one instead.

services:
  dashy:
    image: ghcr.io/lissy93/dashy:3.1.0@sha256:b9929261cbf9353f8aee2c63b35e53aafc4951aa9923c1244242de7c1251f49f
    container_name: dashy
    networks:
      - traefik
    volumes:
      - ./conf.yml:/app/user-data/conf.yml
      - /etc/localtime:/etc/localtime:ro
    environment:
      - NODE_ENV=production
      - VUE_APP_STARTING_VIEW=minimal
    restart: 'unless-stopped'
    healthcheck:
      test: ['CMD', 'node', '/app/services/healthcheck']
      interval: 1m30s
      timeout: 10s
      retries: 3
      start_period: 40s
    security_opt:
      - no-new-privileges
    labels:
      traefik.enable: 'true'
      traefik.http.routers.dashy.entrypoints: 'http'
      traefik.http.routers.dashy.rule: 'Host(`www.example.com`)'
      traefik.http.middlewares.dashy-https-redirect.redirectscheme.scheme: 'https'
      traefik.http.routers.dashy.middlewares: 'dashy-https-redirect'
      traefik.http.routers.dashy-secure.entrypoints: 'https'
      traefik.http.routers.dashy-secure.rule: 'Host(`www.example.com`)'
      traefik.http.routers.dashy-secure.tls: 'true'

networks:
  traefik:
    external: true

---
pageInfo:
  title: Title
  description: Description
  navLinks:
  - title: GitHub
    path: https://github.com/Lissy93/dashy
  - title: Documentation
    path: https://dashy.to/docs

appConfig:
  theme: nord
  layout: vertical
  iconSize: large
  language: fr
  disableConfiguration: true
  defaultOpeningMethod: newtab
  statusCheck: true
  hideComponents:
    hideSettings: true
  preventLocalSave: true
  preventWriteToDisk: true

sections:
  <omitted>

Additional info

No response

Please tick the boxes

• You have explained the issue clearly, and included all relevant info
• You are using a supported version of Dashy
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[CrazyWolf13]

Hi

Have you already done a rebuild, thorugh the UI, after setting the vue_app_starting_view env ?

[DBLouis]

I just tried, the theme is still the default one.

[DBLouis]

If I click on settings button the theme is immediately applied.

[CrazyWolf13]

You're right!

I've just tested this and confirm this weird behaviour, seems like clicking the settings icon, somehwat reload the ui?

Config used for testing:

---
# Page meta info, like heading, footer text and nav links
pageInfo:
  title: Dashy
  description: Welcome to your new dashboard!
  navLinks:
  - title: GitHub
    path: https://github.com/Lissy93/dashy
  - title: Documentation
    path: https://dashy.to/docs

# Optional app settings and configuration
appConfig:
  theme: nord

# Main content - An array of sections, each containing an array of items
sections:
- name: Getting Started
  icon: fas fa-rocket
  items:
  - title: Dashy Live
    description: Development a project management links for Dashy
    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
    url: https://live.dashy.to/
    target: newtab
  - title: GitHub
    description: Source Code, Issues and Pull Requests
    url: https://github.com/lissy93/dashy
    icon: favicon
  - title: Docs
    description: Configuring & Usage Documentation
    provider: Dashy.to
    icon: far fa-book
    url: https://dashy.to/docs
  - title: Showcase
    description: See how others are using Dashy
    url: https://github.com/Lissy93/dashy/blob/master/docs/showcase.md
    icon: far fa-grin-hearts
  - title: Config Guide
    description: See full list of configuration options
    url: https://github.com/Lissy93/dashy/blob/master/docs/configuring.md
    icon: fas fa-wrench
  - title: Support
    description: Get help with Dashy, raise a bug, or get in contact
    url: https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md
    icon: far fa-hands-helping

.env file:

# Set the default view to load on startup (can be `minimal`, `workspace` or `home`)
VUE_APP_STARTING_VIEW=minimal

Tought a video probably shows this the best:
https://github.com/Lissy93/dashy/assets/96661824/ba290873-e2f0-4a96-9f18-3546beeca5b7

[pulpocaminante]

document.documentElement.setAttribute('data-theme', 'matrix');

Fixes it, so presumably its just not loading the theme

[pulpocaminante]

@DBLouis , @CrazyWolf13

A hacky workaround until this gets fixed:

docker exec -it dashy sh

where dashy is the name of your container

then edit /app/dist/index.html and in the js section add:

document.documentElement.setAttribute('data-theme', 'matrix');

Where matrix is the theme you'd like to use

[shotor]

@DBLouis , @CrazyWolf13

A hacky workaround until this gets fixed:

If you want to get proper dirty but have it persistent across docker restarts:

1. Copy package.json from the source and place it somewhere

Change:

"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build"

To:

"build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build && node ./fix-theme.js"

2. Copy this script and place it somewhere - I call it fix-theme.js

const fs = require("fs")

const HTML_FILE = "dist/index.html"
const DEFAULT_THEME = "matrix"

const scriptContent = `
;(() => {
  const theme = localStorage.getItem("theme") || "${DEFAULT_THEME}";
  document.documentElement.setAttribute("data-theme", theme);
})();
`

const htmlContent = fs.readFileSync(HTML_FILE, "utf-8")

const stringToSearch = `setTimeout(() => {`

const updatedHtml = htmlContent.replace(
  stringToSearch,
  `${scriptContent}\n${stringToSearch}`
)

fs.writeFileSync(HTML_FILE, updatedHtml, "utf-8")

3. Update your docker compose and add these volumes:

    volumes:
      - /path/to/your/package.json:/app/package.json
      - /path/to/your/fix-theme.js:/app/fix-theme.js