Flash of Light Theme in SSR with Dark Mode Since v2.14.3

[zsozark]

What happened?

Since Quasar v2.14.3, when using SSR with dark mode enabled ($q.dark.set(true)), the page briefly flashes the light theme before settling on the dark theme. The server correctly renders the page with the body--dark class, but on the client side, it temporarily switches to body--light before reverting to body--dark. This causes a noticeable visual flicker. Prior to v2.14.3 (e.g., v2.14.2), the dark mode remained consistent without this flash.

Problem occurs since this commit: c6368ba .

What did you expect to happen?

I expected the dark mode to be applied seamlessly from server to client, with the body--dark class remaining intact throughout the rendering process, resulting in no flash of the light theme.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-yrptuszq?file=quasar.config.js,src%2FApp.vue&title=Quasar%20Framework%20-%20app-vite%20v2

How to reproduce?

1. Open the reproduction URL provided above.
2. Observe the initial page load in the browser preview.
3. Notice that the page briefly shows the light theme (white background) before switching to the dark theme (dark background).

Alternatively, in the Quasar repo:

1. Clone the Quasar repo and checkout v2.14.3 (git checkout v2.14.3).
2. Navigate to ui/dev and install dependencies (npm install).
3. Edit ui/dev/src/App.vue to enable dark mode:

       $q.dark.set(true);

4. Run the SSR dev server: npm run dev:ssr.
5. Open http://localhost:9000 and watch for the light theme flash before the dark theme applies.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Plugins (quasar), SSR Mode

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response

[stefanvanherwijnen]

In quasar.config.js set:

  framework: {
    config: {
      dark: true
    }
  }

https://quasar.dev/quasar-plugins/dark#note-about-ssr

[zsozark]

Thanks for the tip @stefanvanherwijnen ! I'm aware of this workaround and it works flawlessly but I need to set dark mode according to the logged in user's settings so it's not an option for me unfortunatelly.

Here is in example with this version. The same problem occurs: https://stackblitz.com/edit/quasarframework-stackblitz-templates-m5pkatu7?file=quasar.config.js,src%2FApp.vue&title=Quasar%20Framework%20-%20app-vite%20v2

(config with dark true + $q.dark.set(false))