Install next-themes
Start by installing next-themes:
pnpmnpmyarnbunpnpm add next-themes
Create a theme provider
"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 root layout
Add the ThemeProvider to your root layout and add the suppressHydrationWarning prop to the html tag.
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
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
)
}Add a mode toggle
Place a mode toggle on your site to toggle between light and dark mode.
"use client"
import { MoonIcon, SunIcon } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/preskok-ui/button"
import {
Menu,
MenuContent,
MenuItem,
MenuTrigger,
} from "@/components/ui/preskok-ui/menu"
export function ModeToggle() {
const { setTheme } = useTheme()
return (
<Menu>
<MenuTrigger>
<Button intent="outline" size="sq-md" aria-label="Toggle theme">
<SunIcon className="h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
<MoonIcon className="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
</Button>
</MenuTrigger>
<MenuContent>
<MenuItem onAction={() => setTheme("light")}>
<SunIcon className="h-4 w-4" />
Light
</MenuItem>
<MenuItem onAction={() => setTheme("dark")}>
<MoonIcon className="h-4 w-4" />
Dark
</MenuItem>
<MenuItem onAction={() => setTheme("system")}>
<span className="flex h-4 w-4 items-center justify-center">
<span className="h-2 w-2 rounded-full bg-current" />
</span>
System
</MenuItem>
</MenuContent>
</Menu>
)
}