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

[Bug]: Dark mode not working #78

Closed
ezekel opened this issue Sep 23, 2023 · 10 comments · Fixed by #255
Closed

[Bug]: Dark mode not working #78

ezekel opened this issue Sep 23, 2023 · 10 comments · Fixed by #255
Labels
bug Something isn't working hacktoberfest

Comments

@ezekel
Copy link

ezekel commented Sep 23, 2023 •
edited
Loading

Environment

Development OS: Windows 10 
Node version: v16.19.0
Package manager: npm@8.19.2
Shadcn Vue version:shadcn-vue@0.1.9
Vue version: ^3.3.4

Link to minimal reproduction

none

Steps to reproduce

<template>
  dark
  <DashBoard/>
</template>

Describe the bug

Hi, I noticed a strange behavior.

In my index.html, I manually added the class dark. Then, I ran npm run dev, expecting it to enable dark mode. However, the background remained white, indicating that dark mode was not working.

<!DOCTYPE html>
<html lang="en" class="dark">

To resolve this, I added the text 'dark' after an HMR (Hot Module Replacement) update. After this change, dark mode started working, and the background turned dark. I'm not sure what went wrong, but it seems I had to add the 'dark' text to my template.

App.vue

<template>
  dark
  <DashBoard/>
</template>

Expected behavior

The dark mode should work if I add a dark class to the HTML tag

Conext & Screenshots (if applicable)

No response
@ezekel ezekel added the bug Something isn't working label Sep 23, 2023
@zernonia
Copy link
Member

Hi @ezekel .. this seems like some tailwind.config issue, rather than shadcn-vue's. Could you perhaps check that you
have darkMode: 'class in tailwind.config.js? 😁

Or at least provide a minimal repo?

@ezekel
Copy link
Author

ezekel commented Sep 26, 2023

Yes, I have that in my tailwind.config

I just changed this class from

.dark{
}

to

 :root[class~="dark"]{

}

and it works.

I followed this link

shadcn-ui/ui#313 (comment)

@zernonia
Copy link
Member

Nice find @ezekel ! Perhaps we can fix it in our style.css too 😁
Wanna help by creating a PR?

@selemondev
Copy link
Contributor

May I be assigned to handle this issue, @zernonia ?

@selemondev selemondev mentioned this issue Oct 14, 2023
Closed
@sadeghbarati
Copy link
Collaborator

sadeghbarati commented Oct 15, 2023 •
edited
Loading

@ezekel

If you are using @vueuse/core useDark in Vite or Nuxt
Check comment below 👇 By mio :0

If you using Nuxt @nuxtjs/color-mode is recommended

@miosenpai
Copy link
Contributor

This is because shadcn-vue implements dark theme with CSS variables under @layer base and Tailwind removes unused CSS in its own layers. One way to address this is to just safelist dark, for example:

// nuxt.config.ts
tailwindcss: {
  viewer: false,
  config: {
    safelist: [
      'dark'
    ]
  }
},

@antonreshetov
Copy link
Contributor

Why is this still not fixed?

@sadeghbarati
Copy link
Collaborator

Why is this still not fixed?

There is no bug here

We just keep this open until we add Dark mode documentation

@zernonia
Copy link
Member

zernonia commented Jan 9, 2024 •
edited
Loading

As there's no generalized solution for this case.. it really depends on which framwork you use. Thus as @sadeghbarati mentioned, we will be adding docs regarding Dark mode #236

@antonreshetov
Copy link
Contributor

As there's no generalized solution for this case.. it really depends on which framwork you use.

Well, you can make a separate solution for each framework. When initializing through npx shadcn-vue@latest init, not so many of them are supported. Or simply change the style description as written here #78 (comment)

@miosenpai miosenpai mentioned this issue Jan 9, 2024
Merged
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 hacktoberfest
Projects
None yet
Milestone
No milestone
6 participants
@miosenpai @ezekel @antonreshetov @sadeghbarati @zernonia @selemondev