@noeg/usetheme/dist/index.js

React hook and provider for application theming

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  ThemeProvider: () => ThemeProvider,
  useTheme: () => useTheme
});
module.exports = __toCommonJS(index_exports);

// src/hook.ts
var import_react2 = require("react");

// src/provider.tsx
var import_uselocalstorage = require("@noeg/uselocalstorage");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var ThemeProviderContext = (0, import_react.createContext)(null);
function ThemeProvider({
  children,
  defaultTheme = "system",
  storageKey = "vite-ui-theme",
  ...props
}) {
  const [theme, setTheme] = (0, import_uselocalstorage.useLocalStorage)(storageKey, defaultTheme);
  const [systemTheme, setSystemTheme] = (0, import_react.useState)(
    () => theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme
  );
  (0, import_react.useEffect)(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
    if (theme === "system") {
      const systemTheme2 = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      root.classList.add(systemTheme2);
      setSystemTheme(systemTheme2);
      return;
    }
    root.classList.add(theme);
    setSystemTheme(theme);
  }, [theme]);
  const value = {
    theme,
    systemTheme,
    setTheme
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
}

// src/hook.ts
var useTheme = () => {
  const context = (0, import_react2.useContext)(ThemeProviderContext);
  if (!context)
    throw new Error("useTheme must be used within a ThemeProvider");
  return context;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ThemeProvider,
  useTheme
});
//# sourceMappingURL=index.js.map