Docs
Dark Mode

Dark Mode

Adding dark mode to your site.

Next.js

Create a theme provider

components/theme-provider.tsx
"use client"
 
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Wrap your root layout

Add the ThemeProvider to your root layout.

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

Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.

Other frameworks

I'm looking for help writing guides for other frameworks. Help me write guides for Remix, Astro and Vite by opening an PR.

ThemingCLI