Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
anonimusprogramus opened this issue Nov 29, 2023 · 0 comments
Open

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

anonimusprogramus opened this issue Nov 29, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@anonimusprogramus
Copy link

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
@anonimusprogramus anonimusprogramus added the bug Something isn't working label Nov 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@anonimusprogramus