flowbite-react/dist/theme/mode-script.js

Official React components built for Flowbite and Tailwind CSS

import { jsx } from 'react/jsx-runtime';
import { getPrefix } from '../store/index.js';

const defaultOptions = {
  defaultMode: "auto",
  localStorageKey: "flowbite-theme-mode",
  prefix: ""
};
function ThemeModeScript({
  mode,
  defaultMode = defaultOptions.defaultMode,
  localStorageKey = defaultOptions.localStorageKey,
  ...others
}) {
  return /* @__PURE__ */ jsx(
    "script",
    {
      ...others,
      "data-flowbite-theme-mode-script": true,
      dangerouslySetInnerHTML: {
        __html: getThemeModeScript({ mode, defaultMode, localStorageKey, prefix: getPrefix() ?? "" })
      }
    }
  );
}
ThemeModeScript.displayName = "ThemeModeScript";
function getThemeModeScript(props = {}) {
  const {
    mode,
    defaultMode = defaultOptions.defaultMode,
    localStorageKey = defaultOptions.localStorageKey,
    prefix = defaultOptions.prefix
  } = props;
  return `
    try {
      const storageMode = window.localStorage.getItem("${localStorageKey}");
      const isStorageModeValid = storageMode === "light" || storageMode === "dark" || storageMode === "auto";
      const resolvedMode = (isStorageModeValid ? storageMode : null) ?? ${mode ? `"${mode}"` : void 0} ?? "${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 storageMode = window.localStorage.getItem("${localStorageKey}");
        const isStorageModeValid = storageMode === "light" || storageMode === "dark" || storageMode === "auto";
        const resolvedMode = isStorageModeValid ? storageMode : "${defaultMode}";

        if (resolvedMode === "auto") {
          if (e.matches) {
            document.documentElement.classList.add("${prefix}dark");
          } else {
            document.documentElement.classList.remove("${prefix}dark");
          }
        }
      });

      // Add listener for storage changes
      window.addEventListener("storage", (e) => {
        if (e.key === "${localStorageKey}") {
          const newMode = e.newValue;
          const isStorageModeValid = newMode === "light" || newMode === "dark" || newMode === "auto";
          const resolvedMode = isStorageModeValid ? newMode : "${defaultMode}";

          if (resolvedMode === "dark" || (resolvedMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
            document.documentElement.classList.add("${prefix}dark");
          } else {
            document.documentElement.classList.remove("${prefix}dark");
          }
        }
      });
    } catch (e) {}
  `;
}
function initThemeMode(props = {}) {
  const {
    mode,
    defaultMode = defaultOptions.defaultMode,
    localStorageKey = defaultOptions.localStorageKey,
    prefix = defaultOptions.prefix
  } = props;
  try {
    const storageMode = window.localStorage.getItem(localStorageKey);
    const isStorageModeValid = storageMode === "light" || storageMode === "dark" || storageMode === "auto";
    const resolvedMode = (isStorageModeValid ? storageMode : null) ?? 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);
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", (e) => {
      const storageMode2 = window.localStorage.getItem(localStorageKey);
      const isStorageModeValid2 = storageMode2 === "light" || storageMode2 === "dark" || storageMode2 === "auto";
      const resolvedMode2 = isStorageModeValid2 ? storageMode2 : defaultMode;
      if (resolvedMode2 === "auto") {
        if (e.matches) {
          document.documentElement.classList.add(`${prefix}dark`);
        } else {
          document.documentElement.classList.remove(`${prefix}dark`);
        }
      }
    });
    window.addEventListener("storage", (e) => {
      if (e.key === localStorageKey) {
        const newMode = e.newValue;
        const isStorageModeValid2 = newMode === "light" || newMode === "dark" || newMode === "auto";
        const resolvedMode2 = isStorageModeValid2 ? newMode : defaultMode;
        if (resolvedMode2 === "dark" || resolvedMode2 === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
          document.documentElement.classList.add(`${prefix}dark`);
        } else {
          document.documentElement.classList.remove(`${prefix}dark`);
        }
      }
    });
  } catch (e) {
  }
}

export { ThemeModeScript, getThemeModeScript, initThemeMode };
//# sourceMappingURL=mode-script.js.map