@vxrn/color-scheme 1.1.320 → 1.1.321

package/dist/cjs/index.js

@@ -0,0 +1,119 @@
+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: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__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: !0 }), mod);
+var src_exports = {};
+__export(src_exports, {
+  MetaTheme: () => MetaTheme,
+  SchemeProvider: () => SchemeProvider,
+  getColorScheme: () => import_universal_color_scheme2.getColorScheme,
+  onColorSchemeChange: () => import_universal_color_scheme2.onColorSchemeChange,
+  setSchemeSetting: () => setSchemeSetting,
+  useColorScheme: () => useColorScheme,
+  useSchemeSetting: () => useSchemeSetting
+});
+module.exports = __toCommonJS(src_exports);
+var import_universal_color_scheme = require("@vxrn/universal-color-scheme"), import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"), import_react = require("react"), import_universal_color_scheme2 = require("@vxrn/universal-color-scheme"), import_jsx_runtime = require("react/jsx-runtime");
+const storageKey = "vxrn-scheme", getSetting = () => typeof localStorage < "u" && localStorage.getItem(storageKey) || "system", SchemeContext = (0, import_react.createContext)({
+  setting: "system",
+  scheme: "light"
+}), useColorScheme = () => {
+  const [state] = (0, import_universal_color_scheme.useColorScheme)();
+  return [state, setSchemeSetting];
+};
+function useSchemeSetting() {
+  return [(0, import_react.useContext)(SchemeContext), setSchemeSetting];
+}
+function setSchemeSetting(next) {
+  typeof localStorage < "u" && localStorage.setItem(storageKey, next), (0, import_universal_color_scheme.setColorScheme)(next);
+}
+function SchemeProvider({
+  children,
+  // defaults to tamagui-compatible
+  getClassName = (name) => `t_${name}`
+}) {
+  const [colorSchemeSetting] = (0, import_universal_color_scheme.useColorSchemeSetting)(), [colorScheme] = useColorScheme();
+  return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
+    (0, import_universal_color_scheme.setColorScheme)(getSetting());
+    const toAdd = getClassName(colorScheme), { classList } = document.documentElement;
+    if (!classList.contains(toAdd)) {
+      const toRemove = colorScheme === "light" ? "dark" : "light";
+      classList.remove(getClassName(toRemove)), classList.add(toAdd);
+    }
+  }, [colorScheme]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        dangerouslySetInnerHTML: {
+          __html: `let d = document.documentElement.classList
+          d.remove('${getClassName("light")}')
+            d.remove('${getClassName("dark")}')
+          let e = localStorage.getItem('${storageKey}')
+          let t =
+            'system' === e || !e
+              ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              : e === 'dark'
+          t ? d.add('${getClassName("dark")}') : d.add('${getClassName("light")}')
+          `
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SchemeContext.Provider,
+      {
+        value: (0, import_react.useMemo)(
+          () => ({
+            scheme: colorScheme,
+            setting: colorSchemeSetting
+          }),
+          [colorScheme, colorSchemeSetting]
+        ),
+        children
+      }
+    )
+  ] });
+}
+const MetaTheme = ({
+  color,
+  darkColor,
+  lightColor
+}) => {
+  const [colorScheme] = useColorScheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "meta",
+      {
+        itemProp: "__deopt",
+        suppressHydrationWarning: !0,
+        id: "vxrn-theme-color",
+        name: "theme-color",
+        content: color ?? (colorScheme === "dark" ? darkColor : lightColor)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        id: "meta-theme-hydrate",
+        dangerouslySetInnerHTML: {
+          __html: `
+let dc = document.getElementById('vxrn-theme-color')
+let e1 = localStorage.getItem('${storageKey}')
+let isD = 'system' === e1 || !e1 ? window.matchMedia('(prefers-color-scheme: dark)').matches : e1 === 'dark'
+dc.setAttribute('content', isD ? '${darkColor}' : '${lightColor}')
+          `
+        }
+      }
+    )
+  ] });
+};
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxrn/color-scheme",
-  "version": "1.1.320",
+  "version": "1.1.321",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -30,12 +30,12 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/use-did-finish-ssr": "^1.115.0",
-    "@vxrn/universal-color-scheme": "1.1.320",
-    "@vxrn/use-isomorphic-layout-effect": "1.1.320"
+    "@tamagui/use-did-finish-ssr": "^1.116.4",
+    "@vxrn/universal-color-scheme": "1.1.321",
+    "@vxrn/use-isomorphic-layout-effect": "1.1.321"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.115.0",
+    "@tamagui/build": "^1.116.4",
     "react": "^18.2.0 || ^19.0.0",
     "react-native": "0.74.5"
   },