docs dark mode: section for Next.js (#1137)

Co-authored-by: Sebastian Sutu <[email protected]>
themesberg · Nov 16, 2023 · c9f85fd · c9f85fd · vercel · Nov 16, 2023
1 parent ca3370e
commit c9f85fd
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/content/docs/customize/dark-mode.mdx b/content/docs/customize/dark-mode.mdx
@@ -21,4 +21,51 @@ export default function MyPage() {
 }
 ```
 
+## NextJS
+
+In server side rendered applications, such as NextJS, to avoid page flicker (if `dark` mode is set) before NextJS hydrates the content, `ThemeModeScript` component must be rendered in `Head` component (see implementation below).
+
+`ThemeModeScript` renders a script tag that sets `dark` or removes `dark` from `<html>` element before hydration occurs.
+
+### App router
+
+```tsx
+// app/layout.tsx
+
+import { ThemeModeScript } from 'flowbite-react';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <ThemeModeScript />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+### Pages router
+
+```tsx
+// pages/_document.tsx
+
+import { ThemeModeScript } from 'flowbite-react';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <ThemeModeScript />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+```
+
 <div className="h-[20vh]" />