feat: ThemeModeScript - avoid page flicker on reload on SSR applica…

…tion (NextJS, Remix) (#1056) * feat: create `ThemeModeScript` to avoid page flicker on reload when dark mode is set; add script to root layout on homepage + docs * refactor: move `ThemeModeScript` into `components` directory --------- Co-authored-by: Sebastian Sutu <[email protected]>
themesberg · Oct 19, 2023 · 4f0399b · 4f0399b · vercel · Oct 19, 2023
1 parent 2e1202c
commit 4f0399b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 0 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Inter as InterFont } from 'next/font/google';
 import type { FC, PropsWithChildren } from 'react';
 import '~/app/docs.css';
 import '~/app/style.css';
+import { ThemeModeScript } from '~/src';
 
 const interFont = InterFont({
   subsets: ['latin'],
@@ -56,6 +57,9 @@ export const metadata: Metadata = {
 const RootLayout: NextPage<PropsWithChildren> = ({ children }) => {
   return (
     <html lang="en" className={`${interFont.variable} font-sans`}>
+      <head>
+        <ThemeModeScript />
+      </head>
       <body>
         {children}
         <FathomScript />

diff --git a/src/components/ThemeModeScript/ThemeModeScript.tsx b/src/components/ThemeModeScript/ThemeModeScript.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import type { ThemeMode } from '../../helpers/use-theme-mode';
+
+export interface ThemeModeScriptProps extends React.ComponentPropsWithoutRef<'script'> {
+  mode?: ThemeMode;
+}
+
+export const ThemeModeScript = ({ mode, ...others }: ThemeModeScriptProps) => {
+  return (
+    <script
+      {...others}
+      data-flowbite-theme-mode-script
+      dangerouslySetInnerHTML={{
+        __html: getScript({ mode, defaultMode: 'light', localStorageKey: 'flowbite-theme-mode' }),
+      }}
+    />
+  );
+};
+
+function getScript({
+  mode,
+  defaultMode,
+  localStorageKey,
+}: {
+  mode?: ThemeMode;
+  defaultMode: ThemeMode;
+  localStorageKey: string;
+}) {
+  return `
+    try {
+      const mode = window.localStorage.getItem('${localStorageKey}') ?? '${mode}' ?? '${defaultMode}';
+      const computedMode =
+        mode === 'auto' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : mode;
+
+      if (computedMode === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    } catch (e) {}
+  `;
+}
diff --git a/src/components/ThemeModeScript/index.ts b/src/components/ThemeModeScript/index.ts
@@ -0,0 +1 @@
+export * from './ThemeModeScript';
diff --git a/src/index.ts b/src/index.ts
@@ -35,6 +35,7 @@ export * from './components/Tab';
 export * from './components/Table';
 export * from './components/TextInput';
 export * from './components/Textarea';
+export * from './components/ThemeModeScript';
 export * from './components/Timeline';
 export * from './components/Toast';
 export * from './components/ToggleSwitch';