This is the latest docs update, but there are missing components and blocks. If you wish to see the complete version, you can check it out at old docs.

Customization

Dark Mode

Adding dark mode to your next app.

Theme management is flexible and personal aspect of application design, so we don’t include a theme provider by default. We recommend using next-themes to easily add dark mode or custom theming to your Next.js app.

Install next-themes

To get started with dark mode, install the next-themes package:

npm install next-themes

Create a Theme Provider

Create a ThemeProvider component to manage the theme state.

Wrap your root layout

Wrap your root layout with the ThemeProvider to enable theme switching.

import { ThemeProvider } from "@/components/theme-provider"
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
      <html lang="en" suppressHydrationWarning>
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
  )
}

Add a Theme Toggle Button

Add a button to toggle between light and dark modes.

Previous

Customize theme

Next

Override Styles

On this page