search

nuxt-modules / color-mode

Dark and Light mode with auto detection made easy with Nuxt 🌗
https://color-mode.nuxtjs.org
MIT License
1.12k stars 112 forks source link

Adding class "theme-red" to <html> breaks color-mode #223

Open anonimusprogramus opened 1 year ago

anonimusprogramus commented 1 year ago

Nuxt with color-mode and shadcn-vue works nicely, but once we add class "theme-red" to , it'll break. The color-mode doesn't start in expected way.

Version

nuxtjs/color-mode: ^3.3.2 nuxt: ^3.8.0

Reproduction Link

https://nuxt.com/docs/getting-started/seo-meta#components

Steps to reproduce

  1. Install Nuxt
  2. Add color-mode
  3. Add shadcn-vue
  4. In nuxt.config.js, set color-mode preference to dark
  5. in app.vue 
    <template>
<div>
<Html class="theme-red"></Html>
<h1>Should be red and dark</h1>
</div>
</template>

What is Expected?

The page loads and completed in dark with theme-red

What is actually happening?

Upon reload (F5), the page loads in light and completed in dark with theme-red

2023-11-29 23-43-48