"system" theme does not work (SSG + SSR)

[grs93-svg]

Hello, When setting the Vuetify theme to "system", the app does not respect the user's system dark/light mode preference during hydration or on first load. It defaults to light mode, even if the OS is in dark mode.

https://stackblitz.com/~/github.com/grs93-svg/vuetify-nuxt-fail-system-theme

I generate the website using : pnpm nuxt generate --preset=cloudflare-pages-static

My system is in dark mode but I have

[dearfad]

Same issue with "nuxt": "^4.0.0", "vuetify-nuxt-module": "^0.18.7", everything worked fine but failed after moving files into 'app' folder and upgrade to nuxt 4.0, not only theme, but also v-button hover color, v-navigation-drawer line, etc. waiting fix it soon...

[dearfad]

vuetify-nuxt-module@0.18.7 with vuetify 3.7.16, npm install vuetify to newer 3.9.2, solved.

[grs93-svg]

No, that's not solved for me. I'm using latest package version

[grs93-svg]

Hello @userquin could you help here ? thanks!

[userquin]

Current Vuetify version is not yet ready to work with SSG with multiple themes (dark and light themes), the SSG build won't have the required info to avoid huge flash when the default and the browser theme don't match.

For SSR, with HTTP Client Hints (ssrClientHints module options) you can use dark and light themes, system Vuetify theme should be avoided, use instead ssrClientHints.prefersColorSchemeOptions.useBrowserThemeOnly (you'll need to add both themes), not yet sure if Vuetify will add both themes when using system.

I need to check changes at Vuetify 3.9 for the new system change.

[userquin]

Will try to figure out how to support this new theme here https://github.com/userquin/vuetify-nuxt-module-nuxt-v4

[AndreyYolkin]

Root cause confirmed in Vuetify 4.0.1: defaultTheme: 'system' resolves the OS preference only in the browser (window.matchMedia, guarded by SUPPORTS_MATCH_MEDIA which is false on the server), so SSR/SSG defaults to light and flashes on dark systems.

#368 ships a partial mitigation for the current line:

• stops the Missing default theme system crash that happened when combining defaultTheme: 'system' with ssrClientHints.prefersColorScheme (now falls back to the configured light theme on the server),
• adds a dev-time warning when theme: 'system' is used under SSR,
• documents the limitation and the useBrowserThemeOnly workaround in the SSR guide.

Full server-side resolution of system (server picking dark/light from client hints and feeding it to Vuetify) remains tracked for the upcoming major rewrite — keeping this issue open under the 2.0.0 milestone for that.