--- title: Next.js description: Adding dark mode to your next app. --- ## Install next-themes Start by installing `next-themes`: ```bash npm install next-themes ``` ## Create a theme provider ```tsx title="components/theme-provider.tsx" showLineNumbers "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } ``` ## Wrap your root layout Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag. ```tsx {1,6,9-14,16} title="app/layout.tsx" showLineNumbers import { ThemeProvider } from "@/components/theme-provider" export default function RootLayout({ children }: RootLayoutProps) { return ( <> {children} ) } ``` ## Add a mode toggle Place a mode toggle on your site to toggle between light and dark mode. ```tsx "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ) } ```