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:
Hm... Try switching .dark to .dark, [data-theme='dark'] in your globals.css
Jump to solution
8 Replies
alexisintech
alexisintech•2y ago
@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)
nexxel
nexxel•2y ago
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
bernardoamim
bernardoamim•2y ago
Hm... Try switching .dark to .dark, [data-theme='dark'] in your globals.css
alexisintech
alexisintech•2y ago
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 😭
nexxel
nexxel•2y ago
okay nice mark this as solution @peachy (alexisintech)
alexisintech
alexisintech•2y ago
yes!!
bernardoamim
bernardoamim•2y ago
Nice work!
alexisintech
alexisintech•2y ago
you guys are so awesome 😭 @bernardoamim @nexxel
Want results from more Discord servers?
Add your server