diff --git a/content/docs/customize/dark-mode.mdx b/content/docs/customize/dark-mode.mdx
index e7b2d1cba..7a90299d2 100644
--- 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 `` element before hydration occurs.
+
+### App router
+
+```tsx
+// app/layout.tsx
+
+import { ThemeModeScript } from 'flowbite-react';
+
+export default function RootLayout({ children }) {
+ return (
+
+
+
+
+ {children}
+
+ );
+}
+```
+
+### Pages router
+
+```tsx
+// pages/_document.tsx
+
+import { ThemeModeScript } from 'flowbite-react';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+