shadcn ui dark mode

Hi guys! Are you using nextjs with tailwind and shadcn? How do you implement dark mode?
2 Replies
Luc Ledo
Luc Ledo•2y ago
conditionally put "dark" on the html element
Alejo
Alejo•2y ago
You can also use next-themes
import { ThemeProvider } from "next-themes";
//...
<ThemeProvider attribute="class">
<Component {...pageProps} />
</ThemeProvider>
import { ThemeProvider } from "next-themes";
//...
<ThemeProvider attribute="class">
<Component {...pageProps} />
</ThemeProvider>
Keep in mind that for some reason the Card component from Shadcn does not have a dark-mode variant, you need to edit the variables --card and --card-foreground inside the .dark block in globals.css I was actually struggling with this myself a few days ago and figured it out some hours ago 😅
Want results from more Discord servers?
Add your server