Dark Mode

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">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
Button