18 replies

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