Next.js

Setting up dark mode in your Next.js project.

Docs

Install next-themes.

npm install next-themes

Create ThemeProvider.

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

Wrap your root layout with the provider.

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

Add theme toggle component.

theme-toggle.tsx
"use client"
 
import * as React from "react"
import { MoonIcon, SunIcon } from "lucide-react"
import { useTheme } from "next-themes"
 
import { Button } from "@/components/ui/button"
 
export function ThemeToggleDemo() {
	const { setTheme, resolvedTheme } = useTheme()
 
	const toggleTheme = React.useCallback(() => {
		setTheme(resolvedTheme === "dark" ? "light" : "dark")
	}, [resolvedTheme, setTheme])
 
	return (
		<Button onClick={toggleTheme} variant="ghost" size="icon">
			<MoonIcon className="dark:hidden" />
			<SunIcon className="hidden dark:block" />
			<span className="sr-only">Toggle theme</span>
		</Button>
	)
}