"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]

[email protected] 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