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.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Theme Provider

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

'use client'
 
import * as React from 'react'
 
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes/dist/types'
 
const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
 
export { ThemeProvider, useTheme }

Since you've got the theme provider in play, you'll probably wanna team it up with a route provider. Go ahead and whip up a providers.tsx file in your components folder.

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>
  )
}

Theme Switcher

For theme switcher, you can use the useTheme hook from next-themes to get the current theme.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

If you spot typos or wrong implementations, feel free to contribute here.

Button