Theme with tailwind and shadcn
Background:
Next-themes is working fine, it switches from light mode to dark mode and these switches are reflected - if you look at the inputs here, they are dark because we're on dark mode. When the app is light mode, they switch to light.
In my global.css, I have it set up exactly like shadcn's docs (bc also that's how it's initialized when installing), and for :root bg-background is white, and for .dark bg-background is dark lol
The issue is:
The Select components (from shadcn ui) are transparent, and I want them to be the background color. So I give them the class bg-background. As you can see, while on dark mode, the app is not registering bg-background from the .dark styles... it's using bg-background from :root so the Select component is white instead of the dark colour that the inputs have.
I feel like this is a simple fix, I just haven't messed around with dark mode themeing with next-themes, tailwind, and shadcn combined sooo
Repo: https://github.com/alexisintech/jaxanimals
Here's where that specific component is so you can check it out:
https://github.com/alexisintech/jaxanimals/blob/main/src/components/ui/Select.tsx
GitHub
GitHub - alexisintech/jaxanimals: Let's find your furbaby.
Let's find your furbaby. Contribute to alexisintech/jaxanimals development by creating an account on GitHub.
GitHub
jaxanimals/Select.tsx at main · alexisintech/jaxanimals
Let's find your furbaby. Contribute to alexisintech/jaxanimals development by creating an account on GitHub.
Solution:Jump to solution
Hm... Try switching
.dark
to .dark, [data-theme='dark']
in your globals.css
8 Replies
@nexxel if ur free at all today, maybe u could figure it out??
on dark mode, bg-background is grabbing the --background colour from :root instead of .dark (in global.css)
honestly, im not that experienced in this
but i think it might be something in your tailwind config
actually no it looks fine
what happens when you remove the
dark:bg-background
and just keep bg-background
Solution
Hm... Try switching
.dark
to .dark, [data-theme='dark']
in your globals.css
this worked
omg
@nexxel sorry for bothering u with the noob question
ugh its next-themes that fucked everything. i checked next-themes docs and found out next-themes uses [data-theme='dark'] for applying dark mode. and bernard's exact suggestion is what i applied and it worked
but thank u both so much ðŸ˜
okay nice
mark this as solution @peachy (alexisintech)
yes!!
Nice work!
you guys are so awesome 😠@bernardoamim @nexxel