shadcn ui dark mode

Hi guys! Are you using nextjs with tailwind and shadcn? How do you implement dark mode?

2 Replies

conditionally put "dark" on the html element

Alejo•3y 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 😅

Gaming

Programming

shadcn ui dark mode

Did you find this page helpful?