mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-27 06:34:12 +00:00
cf4ccb34e2
Users have repeatedly run into hydration errors because they don't read the next-themes readme and don't pay attention to the shadcn/ui docs and miss that the `suppressHydrationWarning` prop must be added. This commit mentions this explicitly and highlights the line in the snippet (as well as fixing the previously wrong highlighting).
69 lines
1.4 KiB
Plaintext
69 lines
1.4 KiB
Plaintext
---
|
|
title: Next.js
|
|
description: Adding dark mode to your next app.
|
|
---
|
|
|
|
## Dark mode
|
|
|
|
<Steps>
|
|
|
|
### Install next-themes
|
|
|
|
Start by installing `next-themes`:
|
|
|
|
```bash
|
|
npm install next-themes
|
|
```
|
|
|
|
### Create a theme provider
|
|
|
|
```tsx title="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 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"
|
|
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.
|
|
|
|
<ComponentPreview name="mode-toggle" className="[&_.preview]:items-start" />
|
|
|
|
</Steps>
|