refactor(theme): enhance theme mode handling with new initialization and script generation functions

SutuSebastian · SutuSebastian · commit 356a0a700eee · 2025-03-24T12:33:46.000+02:00
diff --git a/packages/ui/src/hooks/use-theme-mode.ts b/packages/ui/src/hooks/use-theme-mode.ts
@@ -14,21 +14,15 @@ export type ThemeMode = "light" | "dark" | "auto";
 export function useThemeMode() {
   const [mode, setMode] = useState<ThemeMode>(getInitialMode(getMode()));
 
-  /**
-   * Persist `mode` in local storage and add/remove `dark` class on `html`
-   */
-  useEffect(() => {
-    setModeInLS(mode);
-    setModeInDOM(mode);
-  }, []);
-
   /**
    * Sync all tabs with the latest theme mode value
    */
   useWatchLocalStorageValue({
     key: LS_THEME_MODE,
-    onChange(newValue) {
-      if (newValue) handleSetMode(newValue as ThemeMode);
+    onChange(newValue: ThemeMode) {
+      if (newValue) {
+        handleSetMode(newValue);
+      }
     },
   });
 
@@ -53,23 +47,31 @@ export function useThemeMode() {
   function toggleMode() {
     let newMode = mode;
 
-    if (newMode === "auto") newMode = computeModeValue(newMode);
+    if (newMode === "auto") {
+      newMode = computeModeValue(newMode);
+    }
 
     newMode = newMode === "dark" ? "light" : "dark";
 
     handleSetMode(newMode);
   }
 
   /**
-   * Sets the value to `<Flowbite theme={{ mode }}>` prop
+   * Sets the value to `<ThemeConfig mode={mode} />` prop
    */
   function clearMode() {
     const newMode = mode ?? DEFAULT_MODE;
 
     handleSetMode(newMode);
   }
 
-  return { mode, computedMode: computeModeValue(mode), setMode: handleSetMode, toggleMode, clearMode };
+  return {
+    mode,
+    computedMode: computeModeValue(mode),
+    setMode: handleSetMode,
+    toggleMode,
+    clearMode,
+  };
 }
 
 /**
@@ -79,7 +81,6 @@ function useSyncMode(onChange: (mode: ThemeMode) => void) {
   useEffect(() => {
     function handleSync(e: Event) {
       const mode = (e as CustomEvent<ThemeMode>).detail;
-
       onChange(mode);
     }
 
@@ -110,9 +111,11 @@ function setModeInDOM(mode: ThemeMode) {
 }
 
 function getInitialMode(defaultMode?: ThemeMode): ThemeMode {
-  if (!isClient()) return DEFAULT_MODE;
+  if (!isClient()) {
+    return DEFAULT_MODE;
+  }
 
-  const LSMode = localStorage.getItem(LS_THEME_MODE) as ThemeMode | undefined;
+  const LSMode = localStorage.getItem(LS_THEME_MODE) as ThemeMode | null;
 
   return LSMode ?? defaultMode ?? DEFAULT_MODE;
 }
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
@@ -94,5 +94,5 @@ export const theme: FlowbiteTheme = {
 };
 
 export { ThemeConfig, type ThemeConfigProps } from "./config";
-export { ThemeModeScript, type ThemeModeScriptProps } from "./mode-script";
+export { getThemeModeScript, initThemeMode, ThemeModeScript, type ThemeModeScriptProps } from "./mode-script";
 export { ThemeProvider, useThemeProvider, type ThemeProviderProps, type ThemeProviderValue } from "./provider";
diff --git a/packages/ui/src/theme/mode-script.tsx b/packages/ui/src/theme/mode-script.tsx
@@ -2,59 +2,173 @@ import type React from "react";
 import type { ThemeMode } from "../hooks/use-theme-mode";
 import { getPrefix } from "../store";
 
+const defaultOptions = {
+  mode: "auto" as ThemeMode,
+  defaultMode: "auto" as ThemeMode,
+  localStorageKey: "flowbite-theme-mode",
+  prefix: "",
+};
+
 export interface ThemeModeScriptProps extends React.ComponentPropsWithoutRef<"script"> {
+  /**
+   * The current theme mode to use
+   *
+   * @type {"light" | "dark" | "auto"}
+   */
   mode?: ThemeMode;
   /**
-   * "light" | "dark" | "auto"
+   * The default theme mode if none is set
+   *
+   * @type {"light" | "dark" | "auto"}
+   * @default "auto"
    */
   defaultMode?: ThemeMode;
   /**
+   * Key used to store theme mode in localStorage
+   *
+   * @type {string}
    * @default "flowbite-theme-mode"
    */
   localStorageKey?: string;
 }
 
+/**
+ * A script component that handles theme mode initialization
+ *
+ * @param {Object} props - The component props
+ * @param {ThemeMode} [props.mode] - The current theme mode to use
+ * @param {ThemeMode} [props.defaultMode="auto"] - The default theme mode if none is set
+ * @param {string} [props.localStorageKey="flowbite-theme-mode"] - Key used to store theme mode in localStorage
+ * @param {React.ComponentPropsWithoutRef<"script">} props.others - Additional script element props
+ * @returns {JSX.Element} Script element that initializes theme mode
+ */
 export function ThemeModeScript({
   mode,
-  defaultMode = "light",
-  localStorageKey = "flowbite-theme-mode",
+  defaultMode = defaultOptions.defaultMode,
+  localStorageKey = defaultOptions.localStorageKey,
   ...others
-}: ThemeModeScriptProps) {
+}: ThemeModeScriptProps): JSX.Element {
   return (
     <script
       {...others}
       data-flowbite-theme-mode-script
       dangerouslySetInnerHTML={{
-        __html: getScript({ mode, defaultMode, localStorageKey, prefix: getPrefix() ?? "" }),
+        __html: getThemeModeScript({ mode, defaultMode, localStorageKey, prefix: getPrefix() ?? "" }),
       }}
     />
   );
 }
 
 ThemeModeScript.displayName = "ThemeModeScript";
 
-function getScript({
-  mode,
-  defaultMode,
-  localStorageKey,
-  prefix,
-}: {
-  mode?: ThemeMode;
-  defaultMode: ThemeMode;
-  localStorageKey: string;
-  prefix: string;
-}) {
+/**
+ * Generates a script string that handles theme mode initialization
+ *
+ * @param {Object} options - The options object
+ * @param {ThemeMode} [options.mode] - The current theme mode to use
+ * @param {ThemeMode} [options.defaultMode="auto"] - The default theme mode if none is set
+ * @param {string} [options.localStorageKey="flowbite-theme-mode"] - Key used to store theme mode in localStorage
+ * @param {string} [options.prefix=""] - The prefix to use for the theme mode class
+ * @returns {string} Script string that initializes theme mode
+ */
+export function getThemeModeScript(
+  props: {
+    mode?: ThemeMode;
+    defaultMode?: ThemeMode;
+    localStorageKey?: string;
+    prefix?: string;
+  } = {},
+): string {
+  const {
+    mode,
+    defaultMode = defaultOptions.defaultMode,
+    localStorageKey = defaultOptions.localStorageKey,
+    prefix = defaultOptions.prefix,
+  } = props;
+
   return `
     try {
-      const mode = window.localStorage.getItem("${localStorageKey}") ?? "${mode}" ?? "${defaultMode}";
+      const resolvedMode = window.localStorage.getItem("${localStorageKey}") ?? "${mode}" ?? "${defaultMode}";
       const computedMode =
-        mode === "auto" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : mode;
+        resolvedMode === "auto" ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : resolvedMode;
 
       if (computedMode === "dark") {
         document.documentElement.classList.add("${prefix}dark");
       } else {
         document.documentElement.classList.remove("${prefix}dark");
       }
+      localStorage.setItem("${localStorageKey}", resolvedMode);
+
+      // Add listener for system theme changes
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.addEventListener("change", (e) => {
+        const currentMode = window.localStorage.getItem("${localStorageKey}");
+        if (currentMode === "auto") {
+          if (e.matches) {
+            document.documentElement.classList.add("${prefix}dark");
+          } else {
+            document.documentElement.classList.remove("${prefix}dark");
+          }
+        }
+      });
     } catch (e) {}
   `;
 }
+
+/**
+ * Initializes the theme mode by checking localStorage, provided mode, or default mode
+ * and applies the appropriate class to the document element
+ *
+ * @param {Object} options - The options object
+ * @param {ThemeMode} [options.mode] - The current theme mode to use
+ * @param {ThemeMode} [options.defaultMode="auto"] - The default theme mode if none is set
+ * @param {string} [options.localStorageKey="flowbite-theme-mode"] - Key used to store theme mode in localStorage
+ * @param {string} [options.prefix=""] - The prefix to use for the theme mode class
+ * @returns {void}
+ */
+export function initThemeMode(
+  props: {
+    mode?: ThemeMode;
+    defaultMode?: ThemeMode;
+    localStorageKey?: string;
+    prefix?: string;
+  } = {},
+): void {
+  const {
+    mode,
+    defaultMode = defaultOptions.defaultMode,
+    localStorageKey = defaultOptions.localStorageKey,
+    prefix = defaultOptions.prefix,
+  } = props;
+
+  try {
+    const resolvedMode = window.localStorage.getItem(localStorageKey) ?? mode ?? defaultMode;
+    const computedMode =
+      resolvedMode === "auto"
+        ? window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light"
+        : resolvedMode;
+
+    if (computedMode === "dark") {
+      document.documentElement.classList.add(`${prefix}dark`);
+    } else {
+      document.documentElement.classList.remove(`${prefix}dark`);
+    }
+    localStorage.setItem(localStorageKey, resolvedMode);
+
+    // Add listener for system theme changes
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    mediaQuery.addEventListener("change", (e) => {
+      const currentMode = window.localStorage.getItem(localStorageKey);
+      if (currentMode === "auto") {
+        if (e.matches) {
+          document.documentElement.classList.add(`${prefix}dark`);
+        } else {
+          document.documentElement.classList.remove(`${prefix}dark`);
+        }
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty
+  } catch (e) {}
+}
