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.

In the terminal, run the following command to begin:

npm i next-themes

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.

In the terminal, run the following command to begin:

npm i hq-icons

Next you can create component theme-switcher.tsx

Button