Docs
Dark Mode
Next.js

Next.js

Adding dark mode to your next app.

Install next-themes

Start by installing next-themes:

npm install next-themes

Create a providers

components/providers.tsx

"use client";

import { ThemeProvider } from "next-themes";

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

Wrap your root layout

Add the Providers to your root layout.

app/layout.tsx

import { Providers } from "~/components/providers";

interface LayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: LayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Make sure to add the suppressHydrationWarning prop to the html tag to avoid a hydration mismatch error.

Dark Mode Astro

On This Page

Install next-themes
Create a providers
Wrap your root layout

Contribute