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