Dark mode works on the navbar but cards and inputs stay white

Solved · 91 views · asked 6 days ago by valeria_m · edited

Added a dark mode toggle (next-themes). The page background and navbar switch fine. But all the cards, the inputs and the pricing table stay bright white with dark text, so it looks like white boxes floating on black.

Components came from v0 at different times, the navbar was the most recent one.

What I’ve tried

Asked v0 to 'add dark mode support to all components', it added dark: classes to 3 components and changed the colors of the navbar.

Comment

3 answers

Marked as helpful by the asker

aiko_n6 days ago · edited

The older v0 components hard-code colors instead of using the theme tokens. Search for them:

grep -rnE "bg-white|text-black|text-gray-900|border-gray-200" components/ app/

Replace with the shadcn tokens, which flip automatically when .dark is on <html>:

hard-coded	token
`bg-white` (page)	`bg-background`
`bg-white` (card)	`bg-card text-card-foreground`
`text-gray-500`	`text-muted-foreground`
`border-gray-200`	`border-border` / `border-input`

Don't add dark:bg-zinc-900 next to every bg-white. That doubles your color decisions and you'll miss half of them again next time.

Comment

48 matches for that grep lol. Replaced them in about half an hour, dark mode looks right everywhere now valeria_m 6 days ago · edited

nomvula_b6 days ago · edited

Also make sure ThemeProvider has attribute="class", otherwise next-themes sets a data attribute and your dark variant never matches.

Comment

mo_saleh6 days ago · edited

Check components.json too. If cssVariables is false there, shadcn add generates components with hard-coded color classes, and you get this problem again with every new component.

Comment

Keyboard shortcuts

Dark mode works on the navbar but cards and inputs stay white

What I’ve tried

3 answers

Your answer