diff --git a/README.md b/README.md index 9bea936e..ee13fb7d 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ An abstraction for themes in your Next.js app. - ✅ Perfect dark mode in 2 lines of code - ✅ System setting with prefers-color-scheme - ✅ Themed browser UI with color-scheme +- ✅ Support for Next.js 13 `appDir` - ✅ No flash on load (both SSR and SSG) - ✅ Sync theme across tabs and windows - ✅ Disable flashing when changing themes @@ -24,6 +25,8 @@ $ yarn add next-themes ## Use +### With pages/ + You'll need a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use next-themes. The simplest `_app` looks like this: ```js @@ -52,6 +55,60 @@ function MyApp({ Component, pageProps }) { export default MyApp ``` +### With app/ + +You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this: + +```js +// app/layout.jsx + +export default function Layout({ children }) { + return ( + + + {children} + + ) +} +``` + +Adding dark mode support still only takes a few lines of code. Start by creating a new [providers component](https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components) in its own file: + +```js +// app/providers.jsx + +'use client' + +import { ThemeProvider } from 'next-themes' + +export function Providers({ children }) { + return {children} +} +``` + +Then add the `` component to your layout _inside_ of the ``. + +```js +// app/layout.jsx + +import { Providers } from './providers' + +export default function Layout({ children }) { + return ( + + + + {children} + + + ) +} +``` + +> **Note!** If you do not add [suppressHydrationWarning](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep) to your `` you will get warnings because `next-themes` updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements. + +### HTML & CSS + That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, next-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app: ```css