flowbite-react/dist/theme/mode-script.cjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"mode-script.cjs","sources":["../../src/theme/mode-script.tsx"],"sourcesContent":["import type React from \"react\";\nimport type { ThemeMode } from \"../hooks/use-theme-mode\";\nimport { getPrefix } from \"../store\";\n\nconst defaultOptions = {\n  mode: \"auto\" as ThemeMode,\n  defaultMode: \"auto\" as ThemeMode,\n  localStorageKey: \"flowbite-theme-mode\",\n  prefix: \"\",\n};\n\nexport interface ThemeModeScriptProps extends React.ComponentPropsWithoutRef<\"script\"> {\n  /**\n   * The current theme mode to use\n   *\n   * @type {\"light\" | \"dark\" | \"auto\"}\n   */\n  mode?: ThemeMode;\n  /**\n   * The default theme mode if none is set\n   *\n   * @type {\"light\" | \"dark\" | \"auto\"}\n   * @default \"auto\"\n   */\n  defaultMode?: ThemeMode;\n  /**\n   * Key used to store theme mode in localStorage\n   *\n   * @type {string}\n   * @default \"flowbite-theme-mode\"\n   */\n  localStorageKey?: string;\n}\n\n/**\n * A script component that handles theme mode initialization\n *\n * @param {Object} props - The component props\n * @param {ThemeMode} [props.mode] - The current theme mode to use\n * @param {ThemeMode} [props.defaultMode=\"auto\"] - The default theme mode if none is set\n * @param {string} [props.localStorageKey=\"flowbite-theme-mode\"] - Key used to store theme mode in localStorage\n * @param {React.ComponentPropsWithoutRef<\"script\">} props.others - Additional script element props\n * @returns {JSX.Element} Script element that initializes theme mode\n */\nexport function ThemeModeScript({\n  mode,\n  defaultMode = defaultOptions.defaultMode,\n  localStorageKey = defaultOptions.localStorageKey,\n  ...others\n}: ThemeModeScriptProps): JSX.Element {\n  return (\n    <script\n      {...others}\n      data-flowbite-theme-mode-script\n      dangerouslySetInnerHTML={{\n        __html: getThemeModeScript({ mode, defaultMode, localStorageKey, prefix: getPrefix() ?? \"\" }),\n      }}\n    />\n  );\n}\n\nThemeModeScript.displayName = \"ThemeModeScript\";\n\n/**\n * Generates a script string that handles theme mode initialization\n *\n * @param {Object} options - The options object\n * @param {ThemeMode} [options.mode] - The current theme mode to use\n * @param {ThemeMode} [options.defaultMode=\"auto\"] - The default theme mode if none is set\n * @param {string} [options.localStorageKey=\"flowbite-theme-mode\"] - Key used to store theme mode in localStorage\n * @param {string} [options.prefix=\"\"] - The prefix to use for the theme mode class\n * @returns {string} Script string that initializes theme mode\n */\nexport function getThemeModeScript(\n  props: {\n    mode?: ThemeMode;\n    defaultMode?: ThemeMode;\n    localStorageKey?: string;\n    prefix?: string;\n  } = {},\n): string {\n  const {\n    mode,\n    defaultMode = defaultOptions.defaultMode,\n    localStorageKey = defaultOptions.localStorageKey,\n    prefix = defaultOptions.prefix,\n  } = props;\n\n  return `\n    try {\n      const storageMode = window.localStorage.getItem(\"${localStorageKey}\");\n      const isStorageModeValid = storageMode === \"light\" || storageMode === \"dark\" || storageMode === \"auto\";\n      const resolvedMode = (isStorageModeValid ? storageMode : null) ?? ${mode ? `\"${mode}\"` : undefined} ?? \"${defaultMode}\";\n      const computedMode =\n        resolvedMode === \"auto\" ? (window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\") : resolvedMode;\n\n      if (computedMode === \"dark\") {\n        document.documentElement.classList.add(\"${prefix}dark\");\n      } else {\n        document.documentElement.classList.remove(\"${prefix}dark\");\n      }\n      localStorage.setItem(\"${localStorageKey}\", resolvedMode);\n\n      // Add listener for system theme changes\n      const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      mediaQuery.addEventListener(\"change\", (e) => {\n        const storageMode = window.localStorage.getItem(\"${localStorageKey}\");\n        const isStorageModeValid = storageMode === \"light\" || storageMode === \"dark\" || storageMode === \"auto\";\n        const resolvedMode = isStorageModeValid ? storageMode : \"${defaultMode}\";\n\n        if (resolvedMode === \"auto\") {\n          if (e.matches) {\n            document.documentElement.classList.add(\"${prefix}dark\");\n          } else {\n            document.documentElement.classList.remove(\"${prefix}dark\");\n          }\n        }\n      });\n\n      // Add listener for storage changes\n      window.addEventListener(\"storage\", (e) => {\n        if (e.key === \"${localStorageKey}\") {\n          const newMode = e.newValue;\n          const isStorageModeValid = newMode === \"light\" || newMode === \"dark\" || newMode === \"auto\";\n          const resolvedMode = isStorageModeValid ? newMode : \"${defaultMode}\";\n\n          if (resolvedMode === \"dark\" || (resolvedMode === \"auto\" && window.matchMedia(\"(prefers-color-scheme: dark)\").matches)) {\n            document.documentElement.classList.add(\"${prefix}dark\");\n          } else {\n            document.documentElement.classList.remove(\"${prefix}dark\");\n          }\n        }\n      });\n    } catch (e) {}\n  `;\n}\n\n/**\n * Initializes the theme mode by checking localStorage, provided mode, or default mode\n * and applies the appropriate class to the document element\n *\n * @param {Object} options - The options object\n * @param {ThemeMode} [options.mode] - The current theme mode to use\n * @param {ThemeMode} [options.defaultMode=\"auto\"] - The default theme mode if none is set\n * @param {string} [options.localStorageKey=\"flowbite-theme-mode\"] - Key used to store theme mode in localStorage\n * @param {string} [options.prefix=\"\"] - The prefix to use for the theme mode class\n * @returns {void}\n */\nexport function initThemeMode(\n  props: {\n    mode?: ThemeMode;\n    defaultMode?: ThemeMode;\n    localStorageKey?: string;\n    prefix?: string;\n  } = {},\n): void {\n  const {\n    mode,\n    defaultMode = defaultOptions.defaultMode,\n    localStorageKey = defaultOptions.localStorageKey,\n    prefix = defaultOptions.prefix,\n  } = props;\n\n  try {\n    const storageMode = window.localStorage.getItem(localStorageKey);\n    const isStorageModeValid = storageMode === \"light\" || storageMode === \"dark\" || storageMode === \"auto\";\n    const resolvedMode = (isStorageModeValid ? storageMode : null) ?? mode ?? defaultMode;\n    const computedMode =\n      resolvedMode === \"auto\"\n        ? window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n          ? \"dark\"\n          : \"light\"\n        : resolvedMode;\n\n    if (computedMode === \"dark\") {\n      document.documentElement.classList.add(`${prefix}dark`);\n    } else {\n      document.documentElement.classList.remove(`${prefix}dark`);\n    }\n    localStorage.setItem(localStorageKey, resolvedMode);\n\n    // Add listener for system theme changes\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mediaQuery.addEventListener(\"change\", (e) => {\n      const storageMode = window.localStorage.getItem(localStorageKey);\n      const isStorageModeValid = storageMode === \"light\" || storageMode === \"dark\" || storageMode === \"auto\";\n      const resolvedMode = isStorageModeValid ? storageMode : defaultMode;\n\n      if (resolvedMode === \"auto\") {\n        if (e.matches) {\n          document.documentElement.classList.add(`${prefix}dark`);\n        } else {\n          document.documentElement.classList.remove(`${prefix}dark`);\n        }\n      }\n    });\n\n    // Add listener for storage changes\n    window.addEventListener(\"storage\", (e) => {\n      if (e.key === localStorageKey) {\n        const newMode = e.newValue;\n        const isStorageModeValid = newMode === \"light\" || newMode === \"dark\" || newMode === \"auto\";\n        const resolvedMode = isStorageModeValid ? newMode : defaultMode;\n\n        if (\n          resolvedMode === \"dark\" ||\n          (resolvedMode === \"auto\" && window.matchMedia(\"(prefers-color-scheme: dark)\").matches)\n        ) {\n          document.documentElement.classList.add(`${prefix}dark`);\n        } else {\n          document.documentElement.classList.remove(`${prefix}dark`);\n        }\n      }\n    });\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty\n  } catch (e) {}\n}\n"],"names":["jsx","getPrefix"],"mappings":"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"}