Next js

Next.js

Turning your Next.js app into a night owl? Follow this smooth guide to light up the dark mode magic.

Next Themes

Because you are using Next.js, you can use next-themes to implement dark mode. And since you're using justd-icons, you can use the IconSun and IconMoon icons.

Provider and Switcher

Next, you need to create a theme provider component. You can do it like this:

Loading source code...

Usage After that, you can use it in your root layout file like so:

import { Providers } from "@/components/providers"
 
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Add suppressHydrationWarning to the html tag to avoid the hydration error. You can check the Next-Themes documentation for more information.

Previous
Inertia.js
Next
Remix