Dark Mode

Add a light and dark theme toggle to your app.

Another UI switches themes with a .dark class on the html element. The dark values for every token live under .dark in your CSS, so all you need is something that sets that class. These steps use next-themes, which works in Next.js and in Vite.

Install next-themes


pnpm add next-themes

Create a theme provider

components/theme-provider.tsx

"use client"
 
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
 
export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Wrap your app

Next.js: wrap the body of your root layout and add suppressHydrationWarning to the html tag.

app/layout.tsx

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

Vite: wrap your app in src/main.tsx.

src/main.tsx

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
 
import { ThemeProvider } from "@/components/theme-provider"
import App from "./App"
import "./index.css"
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <App />
    </ThemeProvider>
  </StrictMode>
)

Add a mode toggle

Place a toggle anywhere in your app. It calls setTheme from useTheme.

"use client"

import * as React from "react"

Theming RTL

On This Page

Install next-themes Create a theme provider Wrap your app Add a mode toggle