Customization
Dark Mode
Adding dark mode to your next app.
Theme management is flexible and personal aspect of application design, so we don’t include a theme provider by default. We recommend using next-themes to easily add dark mode or custom theming to your Next.js app.
Install next-themes
To get started with dark mode, install the next-themes package:
npm install next-themesCreate a Theme Provider
Create a ThemeProvider component to manage the theme state.
Wrap your root layout
Wrap your root layout with the ThemeProvider to enable theme switching.
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
)
}