@vxrn/color-scheme 1.2.28 → 1.2.29

package/dist/cjs/index.cjs

@@ -22,91 +22,67 @@ var index_exports = {};
 __export(index_exports, {
   MetaTheme: () => MetaTheme,
   SchemeProvider: () => SchemeProvider,
-  clearColorSchemeSetting: () => clearColorSchemeSetting,
-  getColorScheme: () => import_universal_color_scheme2.getColorScheme,
-  onColorSchemeChange: () => import_universal_color_scheme2.onColorSchemeChange,
-  setSchemeSetting: () => setSchemeSetting,
-  useColorScheme: () => useColorScheme,
-  useSchemeSetting: () => useSchemeSetting
+  getSystemScheme: () => import_systemScheme.getSystemScheme,
+  getUserScheme: () => import_userScheme2.getUserScheme,
+  onUserSchemeChange: () => import_userScheme2.onUserSchemeChange,
+  setUserScheme: () => import_userScheme2.setUserScheme,
+  useSystemScheme: () => import_systemScheme.useSystemScheme,
+  useUserScheme: () => import_userScheme2.useUserScheme
 });
 module.exports = __toCommonJS(index_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"),
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"),
+  import_userScheme = require("./userScheme.cjs"),
+  import_systemScheme = require("./systemScheme.cjs"),
+  import_userScheme2 = require("./userScheme.cjs"),
   import_jsx_runtime = require("react/jsx-runtime");
-const storageKey = "vxrn-scheme",
-  clearColorSchemeSetting = () => {
-    setSchemeSetting("system");
-  },
-  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);
-}
+const storageKey = "vxrn-scheme";
 function SchemeProvider({
   children,
-  // defaults to tamagui-compatible
   getClassName = name => `t_${name}`
 }) {
-  const [colorSchemeSetting] = (0, import_universal_color_scheme.useColorSchemeSetting)(),
-    [colorScheme] = useColorScheme();
+  const {
+    value
+  } = (0, import_userScheme.useUserScheme)();
   return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
-    (0, import_universal_color_scheme.setColorScheme)(getSetting());
-    const toAdd = getClassName(colorScheme),
+    const toAdd = getClassName(value),
       {
         classList
       } = document.documentElement;
     if (!classList.contains(toAdd)) {
-      const toRemove = colorScheme === "light" ? "dark" : "light";
+      const toRemove = value === "light" ? "dark" : "light";
       classList.remove(getClassName(toRemove)), classList.add(toAdd);
     }
-  }, [colorScheme]), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+  }, [value]), /* @__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")}')
-          `
+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
-    })]
+    }), children]
   });
 }
-const MetaTheme = ({
+function MetaTheme({
   color,
   darkColor,
   lightColor
-}) => {
-  const [colorScheme] = useColorScheme();
+}) {
+  const {
+    value
+  } = (0, import_userScheme.useUserScheme)();
   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)
+      content: color ?? (value === "dark" ? darkColor : lightColor)
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("script", {
       id: "meta-theme-hydrate",
       dangerouslySetInnerHTML: {
@@ -115,8 +91,8 @@ 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}')
-          `
+`
       }
     })]
   });
-};
+}

package/dist/cjs/index.js

@@ -16,82 +16,53 @@ var index_exports = {};
 __export(index_exports, {
   MetaTheme: () => MetaTheme,
   SchemeProvider: () => SchemeProvider,
-  clearColorSchemeSetting: () => clearColorSchemeSetting,
-  getColorScheme: () => import_universal_color_scheme2.getColorScheme,
-  onColorSchemeChange: () => import_universal_color_scheme2.onColorSchemeChange,
-  setSchemeSetting: () => setSchemeSetting,
-  useColorScheme: () => useColorScheme,
-  useSchemeSetting: () => useSchemeSetting
+  getSystemScheme: () => import_systemScheme.getSystemScheme,
+  getUserScheme: () => import_userScheme2.getUserScheme,
+  onUserSchemeChange: () => import_userScheme2.onUserSchemeChange,
+  setUserScheme: () => import_userScheme2.setUserScheme,
+  useSystemScheme: () => import_systemScheme.useSystemScheme,
+  useUserScheme: () => import_userScheme2.useUserScheme
 });
 module.exports = __toCommonJS(index_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", clearColorSchemeSetting = () => {
-  setSchemeSetting("system");
-}, 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);
-}
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"), import_userScheme = require("./userScheme"), import_systemScheme = require("./systemScheme"), import_userScheme2 = require("./userScheme"), import_jsx_runtime = require("react/jsx-runtime");
+const storageKey = "vxrn-scheme";
 function SchemeProvider({
   children,
-  // defaults to tamagui-compatible
   getClassName = (name) => `t_${name}`
 }) {
-  const [colorSchemeSetting] = (0, import_universal_color_scheme.useColorSchemeSetting)(), [colorScheme] = useColorScheme();
+  const { value } = (0, import_userScheme.useUserScheme)();
   return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
-    (0, import_universal_color_scheme.setColorScheme)(getSetting());
-    const toAdd = getClassName(colorScheme), { classList } = document.documentElement;
+    const toAdd = getClassName(value), { classList } = document.documentElement;
     if (!classList.contains(toAdd)) {
-      const toRemove = colorScheme === "light" ? "dark" : "light";
+      const toRemove = value === "light" ? "dark" : "light";
       classList.remove(getClassName(toRemove)), classList.add(toAdd);
     }
-  }, [colorScheme]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  }, [value]), /* @__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")}')
-          `
+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
-      }
-    )
+    children
   ] });
 }
-const MetaTheme = ({
+function MetaTheme({
   color,
   darkColor,
   lightColor
-}) => {
-  const [colorScheme] = useColorScheme();
+}) {
+  const { value } = (0, import_userScheme.useUserScheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "meta",
@@ -100,7 +71,7 @@ const MetaTheme = ({
         suppressHydrationWarning: !0,
         id: "vxrn-theme-color",
         name: "theme-color",
-        content: color ?? (colorScheme === "dark" ? darkColor : lightColor)
+        content: color ?? (value === "dark" ? darkColor : lightColor)
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -113,10 +84,10 @@ 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/dist/cjs/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAKO,yCACP,sCAA0C,+CAC1C,eAAmD,kBAKnDA,iCAAoD,yCAgEhD;AA9DJ,MAAM,aAAa,eAEN,0BAA0B,MAAM;AAC3C,mBAAiB,QAAQ;AAC3B,GAEM,aAAa,MAChB,OAAO,eAAiB,OAAgB,aAAa,QAAQ,UAAU,KACxE,UAEI,oBAAgB,4BAGnB;AAAA,EACD,SAAS;AAAA,EACT,QAAQ;AACV,CAAC,GAEY,iBAAiB,MAAM;AAClC,QAAM,CAAC,KAAK,QAAI,8BAAAC,gBAAmB;AACnC,SAAO,CAAC,OAAO,gBAAgB;AACjC;AAEO,SAAS,mBAAmB;AAEjC,SAAO,KADQ,yBAAW,aAAa,GACvB,gBAAgB;AAClC;AAEO,SAAS,iBAAiB,MAAqB;AACpD,EAAI,OAAO,eAAiB,OAC1B,aAAa,QAAQ,YAAY,IAAI,OAEvC,8CAAe,IAAI;AACrB;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA;AAAA,EAEA,eAAe,CAAC,SAAS,KAAK,IAAI;AACpC,GAGG;AACD,QAAM,CAAC,kBAAkB,QAAI,qDAAsB,GAC7C,CAAC,WAAW,IAAI,eAAe;AAGnC,4EAA0B,MAAM;AAE9B,sDAAe,WAAW,CAAC;AAE3B,UAAM,QAAQ,aAAa,WAAW,GAChC,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAI,CAAC,UAAU,SAAS,KAAK,GAAG;AAC9B,YAAM,WAAW,gBAAgB,UAAU,SAAS;AACpD,gBAAU,OAAO,aAAa,QAAQ,CAAC,GACvC,UAAU,IAAI,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,WAAW,CAAC,GAIhB,4EAEI;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,yBAAyB;AAAA,UACvB,QAAQ;AAAA,sBACE,aAAa,OAAO,CAAC;AAAA,wBACnB,aAAa,MAAM,CAAC;AAAA,0CACF,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK7B,aAAa,MAAM,CAAC,eAAe,aAAa,OAAO,CAAC;AAAA;AAAA,QAErE;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QACC,WAAO;AAAA,UACL,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,UACX;AAAA,UACA,CAAC,aAAa,kBAAkB;AAAA,QAClC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,CAAC,WAAW,IAAI,eAAe;AAErC,SACE,4EAGE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QAGT,0BAAwB;AAAA,QACxB,IAAG;AAAA,QACH,MAAK;AAAA,QACL,SAAS,UAAU,gBAAgB,SAAS,YAAY;AAAA;AAAA,IAC1D;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,yBAAyB;AAAA,UACvB,QAAQ;AAAA;AAAA,iCAEe,UAAU;AAAA;AAAA,oCAEP,SAAS,QAAQ,UAAU;AAAA;AAAA,QAEvD;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
-  "names": ["import_universal_color_scheme", "useColorSchemeBase"]
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAA0C,+CAE1C,oBAA8B,yBAO9B,sBAAiD,2BACjDA,qBAAgF,yBA0B5E;AAxBJ,MAAM,aAAa;AAEZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,eAAe,CAAC,SAAS,KAAK,IAAI;AACpC,GAGG;AACD,QAAM,EAAE,MAAM,QAAI,iCAAc;AAG9B,4EAA0B,MAAM;AAC9B,UAAM,QAAQ,aAAa,KAAK,GAC1B,EAAE,UAAU,IAAI,SAAS;AAC/B,QAAI,CAAC,UAAU,SAAS,KAAK,GAAG;AAC9B,YAAM,WAAW,UAAU,UAAU,SAAS;AAC9C,gBAAU,OAAO,aAAa,QAAQ,CAAC,GACvC,UAAU,IAAI,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC,GAIV,4EAEI;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,yBAAyB;AAAA,UACvB,QAAQ;AAAA,YACR,aAAa,OAAO,CAAC;AAAA,YACrB,aAAa,MAAM,CAAC;AAAA,gCACA,UAAU;AAAA;AAAA;AAAA;AAAA,aAI7B,aAAa,MAAM,CAAC,eAAe,aAAa,OAAO,CAAC;AAAA;AAAA,QAE3D;AAAA;AAAA,IACF;AAAA,IAED;AAAA,KACH;AAEJ;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,MAAM,QAAI,iCAAc;AAEhC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,0BAAwB;AAAA,QACxB,IAAG;AAAA,QACH,MAAK;AAAA,QACL,SAAS,UAAU,UAAU,SAAS,YAAY;AAAA;AAAA,IACpD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,yBAAyB;AAAA,UACvB,QAAQ;AAAA;AAAA,iCAEe,UAAU;AAAA;AAAA,oCAEP,SAAS,QAAQ,UAAU;AAAA;AAAA,QAEvD;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": ["import_userScheme"]
 }

package/dist/cjs/index.native.js

@@ -24,80 +24,51 @@ var index_exports = {};
 __export(index_exports, {
   MetaTheme: () => MetaTheme,
   SchemeProvider: () => SchemeProvider,
-  clearColorSchemeSetting: () => clearColorSchemeSetting,
-  getColorScheme: () => import_universal_color_scheme2.getColorScheme,
-  onColorSchemeChange: () => import_universal_color_scheme2.onColorSchemeChange,
-  setSchemeSetting: () => setSchemeSetting,
-  useColorScheme: () => useColorScheme,
-  useSchemeSetting: () => useSchemeSetting
+  getSystemScheme: () => import_systemScheme.getSystemScheme,
+  getUserScheme: () => import_userScheme2.getUserScheme,
+  onUserSchemeChange: () => import_userScheme2.onUserSchemeChange,
+  setUserScheme: () => import_userScheme2.setUserScheme,
+  useSystemScheme: () => import_systemScheme.useSystemScheme,
+  useUserScheme: () => import_userScheme2.useUserScheme
 });
 module.exports = __toCommonJS(index_exports);
 var import_jsx_runtime = require("react/jsx-runtime"),
-  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"),
-  storageKey = "vxrn-scheme",
-  clearColorSchemeSetting = function () {
-    setSchemeSetting("system");
-  };
-var SchemeContext = /* @__PURE__ */(0, import_react.createContext)({
-    setting: "system",
-    scheme: "light"
-  }),
-  useColorScheme = function () {
-    var [state] = (0, import_universal_color_scheme.useColorScheme)();
-    return [state, setSchemeSetting];
-  };
-function useSchemeSetting() {
-  var values = (0, import_react.useContext)(SchemeContext);
-  return [values, setSchemeSetting];
-}
-function setSchemeSetting(next) {
-  typeof localStorage < "u" && localStorage.setItem(storageKey, next), (0, import_universal_color_scheme.setColorScheme)(next);
-}
+  import_userScheme = require("./userScheme.native.js"),
+  import_systemScheme = require("./systemScheme.native.js"),
+  import_userScheme2 = require("./userScheme.native.js"),
+  storageKey = "vxrn-scheme";
 function SchemeProvider(param) {
   var {
       children,
-      // defaults to tamagui-compatible
       getClassName = function (name) {
         return `t_${name}`;
       }
     } = param,
-    [colorSchemeSetting] = (0, import_universal_color_scheme.useColorSchemeSetting)(),
-    [colorScheme] = useColorScheme();
+    {
+      value
+    } = (0, import_userScheme.useUserScheme)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(SchemeContext.Provider, {
-      value: (0, import_react.useMemo)(function () {
-        return {
-          scheme: colorScheme,
-          setting: colorSchemeSetting
-        };
-      }, [colorScheme, colorSchemeSetting]),
-      children
-    })]
+    children: [null, children]
   });
 }
-var MetaTheme = function (param) {
+function MetaTheme(param) {
   var {
       color,
       darkColor,
       lightColor
     } = param,
-    [colorScheme] = useColorScheme();
+    {
+      value
+    } = (0, import_userScheme.useUserScheme)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* itemProp removes hoisting - react wasnt de-duping it properly causing two in DOM */
-    /* maybe bug in safari or react */
-    /* @__PURE__ */(0, import_jsx_runtime.jsx)("meta", {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("meta", {
       itemProp: "__deopt",
-      // because the script below runs before render it actually ruins our nice ssr logic here
-      // instead we just avoid the warning its a single tag
       suppressHydrationWarning: !0,
       id: "vxrn-theme-color",
       name: "theme-color",
-      content: color ?? (colorScheme === "dark" ? darkColor : lightColor)
-    }), /* ssr compat theme-color */
-    /* @__PURE__ */(0, import_jsx_runtime.jsx)("script", {
+      content: color ?? (value === "dark" ? darkColor : lightColor)
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("script", {
       id: "meta-theme-hydrate",
       dangerouslySetInnerHTML: {
         __html: `
@@ -105,9 +76,9 @@ 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.native.js.map

package/dist/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","__export","MetaTheme","SchemeProvider","clearColorSchemeSetting","getColorScheme","import_universal_color_scheme2","onColorSchemeChange","setSchemeSetting","useColorScheme","useSchemeSetting","module","exports","import_jsx_runtime","require","import_universal_color_scheme","import_use_isomorphic_layout_effect","import_react","storageKey","SchemeContext","createContext","setting","scheme","state","values","useContext","next","localStorage","setItem","setColorScheme","param","children","getClassName","name","colorSchemeSetting","useColorSchemeSetting","colorScheme","jsxs","Fragment","jsx","Provider","useMemo","color","darkColor","lightColor","itemProp","suppressHydrationWarning","id","content","dangerouslySetInnerHTML","__html"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","__export","MetaTheme","SchemeProvider","getSystemScheme","import_systemScheme","getUserScheme","import_userScheme2","onUserSchemeChange","setUserScheme","useSystemScheme","useUserScheme","module","exports","import_jsx_runtime","require","import_use_isomorphic_layout_effect","import_userScheme","storageKey","param","children","getClassName","name","jsxs","Fragment","color","darkColor","lightColor","jsx","itemProp","suppressHydrationWarning","id","content","dangerouslySetInnerHTML","__html"],"sources":["../../src/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,QAAA,CAAAD,aAAA;EAAAE,SAAA,EAAAA,CAAA,KAAAA,SAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,eAAA,EAAAA,CAAA,KAAAC,mBAAA,CAAAD,eAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAC,kBAAA,CAAAD,aAAA;EAAAE,kBAAA,EAAAA,CAAA,KAAAD,kBAAA,CAAAC,kBAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAF,kBAAA,CAAAE,aAAA;EAAAC,eAAA,EAAAA,CAAA,KAAAL,mBAAA,CAAAK,eAAA;EAAAC,aAAA,EAAAA,CAAA,KAAAJ,kBAAA,CAAAI;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAlB,YAAA,CAAAK,aAA0C;AAY1C,IAAAc,kBAAmB,GAAAC,OAAA;EAAAC,mCAAA,GAAAD,OAAA;EAAAE,iBAAA,GAAAF,OAAA;EAAAV,mBAAA,GAAAU,OAAA;EAAAR,kBAAA,GAAAQ,OAAA;EAAAG,UAAA;AAEZ,SAASf,eAAegB,KAAA;EAC7B;MAAAC,QAAA;MAAAC,YAAA,YAAAA,CAAAC,IAAA;QACA,YAAAA,IAAgB;MAClB;IAGG,IAAAH,KAAA;IAAA;MAAApB;IAAA,QAAAkB,iBAAA,CAAAN,aAAA;EACD,OAAM,eAAY,IAAAG,kBAAA,CAAAS,IAAA,EAAAT,kBAAc,CAAAU,QAAA;IAG9BJ,QAAA,GACE,IAAM,EAENA,QAAK;EAEH;AACmB;AACrB,SACElB,SAIJA,CAAAiB,KAAA;EAEI;MAAAM,KAAA;MAAAC,SAAA;MAAAC;IAAA,IAAAR,KAAA;IAAA;MAAApB;IAAA,QAAAkB,iBAAA,CAAAN,aAAA;EAAA,OAAC,mBAAAG,kBAAA,CAAAS,IAAA,EAAAT,kBAAA,CAAAU,QAAA;IAAAJ,QAAA,kBACC,IAAAN,kBAAyB,CAAAc,GAAA;MAAAC,QACvB,EAAQ;MAAAC,wBACY,EAAC;MAAAC,EAAA,EACrB,kBAAa;MAAOT,IAAA;MACUU,OAAA,EAAAP,KAAA,KAAA1B,KAAA,cAAA2B,SAAA,GAAAC,UAAA;IAAA,uBAAAb,kBAAA,CAAAc,GAAA;MAAAG,EAAA,sBAIV;MAAqCE,uBAAA;QAE3DC,MAAA;AAAA;AAAA,iCACFhB,UAAA;AAAA;AAED,oCACHQ,SAAA,QAAAC,UAAA;AAEJ;MAEO;IACL;EAEA;AACF","ignoreList":[]}

package/dist/cjs/systemScheme.cjs

@@ -0,0 +1,40 @@
+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 systemScheme_exports = {};
+__export(systemScheme_exports, {
+  getSystemScheme: () => getSystemScheme,
+  useSystemScheme: () => useSystemScheme
+});
+module.exports = __toCommonJS(systemScheme_exports);
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"),
+  import_react = require("react");
+const media = typeof window < "u" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+function getSystemScheme() {
+  return media?.matches ? "dark" : "light";
+}
+function useSystemScheme() {
+  const [scheme, setScheme] = (0, import_react.useState)("light");
+  return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
+    setScheme(getSystemScheme());
+    const onChange = () => setScheme(getSystemScheme());
+    return media?.addEventListener("change", onChange), () => media?.removeEventListener("change", onChange);
+  }, []), scheme;
+}

package/dist/cjs/systemScheme.js

@@ -0,0 +1,34 @@
+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 systemScheme_exports = {};
+__export(systemScheme_exports, {
+  getSystemScheme: () => getSystemScheme,
+  useSystemScheme: () => useSystemScheme
+});
+module.exports = __toCommonJS(systemScheme_exports);
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"), import_react = require("react");
+const media = typeof window < "u" && window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+function getSystemScheme() {
+  return media?.matches ? "dark" : "light";
+}
+function useSystemScheme() {
+  const [scheme, setScheme] = (0, import_react.useState)("light");
+  return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
+    setScheme(getSystemScheme());
+    const onChange = () => setScheme(getSystemScheme());
+    return media?.addEventListener("change", onChange), () => media?.removeEventListener("change", onChange);
+  }, []), scheme;
+}
+//# sourceMappingURL=systemScheme.js.map

package/dist/cjs/systemScheme.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/systemScheme.ts"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAA0C,+CAC1C,eAAyB;AAIzB,MAAM,QACJ,OAAO,SAAW,OAAe,OAAO,aACpC,OAAO,WAAW,8BAA8B,IAChD;AAEC,SAAS,kBAA0B;AACxC,SAAO,OAAO,UAAU,SAAS;AACnC;AAEO,SAAS,kBAA0B;AACxC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,OAAO;AAEpD,4EAA0B,MAAM;AAC9B,cAAU,gBAAgB,CAAC;AAC3B,UAAM,WAAW,MAAM,UAAU,gBAAgB,CAAC;AAClD,kBAAO,iBAAiB,UAAU,QAAQ,GACnC,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,CAAC,GAEE;AACT;",
+  "names": []
+}

package/dist/cjs/systemScheme.native.js

@@ -0,0 +1,48 @@
+"use strict";
+
+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 systemScheme_native_exports = {};
+__export(systemScheme_native_exports, {
+  getSystemScheme: () => getSystemScheme,
+  useSystemScheme: () => useSystemScheme
+});
+module.exports = __toCommonJS(systemScheme_native_exports);
+var import_react = require("react"),
+  import_react_native = require("react-native");
+function getSystemScheme() {
+  return import_react_native.Appearance.getColorScheme() || "light";
+}
+function useSystemScheme() {
+  var [scheme, setScheme] = (0, import_react.useState)(getSystemScheme);
+  return (0, import_react.useEffect)(function () {
+    var subscription = import_react_native.Appearance.addChangeListener(function (param) {
+      var {
+        colorScheme
+      } = param;
+      setScheme(colorScheme || "light");
+    });
+    return function () {
+      return subscription.remove();
+    };
+  }, []), scheme;
+}
+//# sourceMappingURL=systemScheme.native.js.map

package/dist/cjs/systemScheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["systemScheme_native_exports","__export","getSystemScheme","useSystemScheme","module","exports","__toCommonJS","import_react","require","import_react_native","Appearance","getColorScheme","scheme","setScheme","useState","useEffect","subscription","addChangeListener","param","colorScheme","remove"],"sources":["../../src/systemScheme.native.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,2BAAA;AAAAC,QAAA,CAAAD,2BAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA,eAAA;EAAAC,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAN,2BAAA;AAAA,IAAAO,YAAA,GAAoCC,OAAA;EACpCC,mBAAA,GAA2BD,OAAA;AACpB,SAASN,gBAAA,EAAkB;EAC9B,OAAOO,mBAAA,CAAAC,UAAA,CAAWC,cAAA,CAAe,KAAK;AAC1C;AACO,SAASR,gBAAA,EAAkB;EAC9B,IAAI,CAACS,MAAA,EAAQC,SAAS,QAAIN,YAAA,CAAAO,QAAA,EAASZ,eAAe;EAClD,WAAAK,YAAA,CAAAQ,SAAA,EAAU,YAAW;IACjB,IAAIC,YAAA,GAAeP,mBAAA,CAAAC,UAAA,CAAWO,iBAAA,CAAkB,UAASC,KAAA,EAAO;MAC5D,IAAI;QAAEC;MAAY,IAAID,KAAA;MACtBL,SAAA,CAAUM,WAAA,IAAe,OAAO;IACpC,CAAC;IACD,OAAO,YAAW;MACd,OAAOH,YAAA,CAAaI,MAAA,CAAO;IAC/B;EACJ,GAAG,EAAE,GACER,MAAA;AACX","ignoreList":[]}

package/dist/cjs/userScheme.cjs

@@ -0,0 +1,95 @@
+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 userScheme_exports = {};
+__export(userScheme_exports, {
+  getUserScheme: () => getUserScheme,
+  onUserSchemeChange: () => onUserSchemeChange,
+  setUserScheme: () => setUserScheme,
+  useUserScheme: () => useUserScheme
+});
+module.exports = __toCommonJS(userScheme_exports);
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect"),
+  import_react = require("react"),
+  import_react_native = require("react-native-web"),
+  import_systemScheme = require("./systemScheme.cjs");
+const listeners = /* @__PURE__ */new Set(),
+  storageKey = "vxrn-scheme";
+let currentSetting = "system",
+  currentValue = "light",
+  isWebListening = !1;
+function startWebListener() {
+  if (isWebListening) return;
+  isWebListening = !0;
+  const matcher = typeof window < "u" ? window.matchMedia?.("(prefers-color-scheme: dark)") : null,
+    onSystemChange = () => {
+      currentSetting === "system" && updateValueFromSystem();
+    };
+  onSystemChange(), matcher?.addEventListener?.("change", onSystemChange);
+}
+function resolveValue(setting) {
+  return setting === "system" ? (0, import_systemScheme.getSystemScheme)() : setting;
+}
+function updateValueFromSystem() {
+  const value = resolveValue("system");
+  value !== currentValue && (currentValue = value, listeners.forEach(l => {
+    l(currentSetting, currentValue);
+  }));
+}
+function updateScheme(setting) {
+  const value = setting === "system" ? resolveValue("system") : setting;
+  (value !== currentValue || currentSetting !== setting) && (currentSetting = setting, currentValue = value, listeners.forEach(l => {
+    l(currentSetting, currentValue);
+  }));
+}
+function setUserScheme(setting) {
+  typeof localStorage < "u" && localStorage.setItem(storageKey, setting), updateScheme(setting);
+}
+function getUserScheme() {
+  return {
+    setting: currentSetting,
+    value: currentValue
+  };
+}
+function onUserSchemeChange(listener) {
+  return listeners.add(listener), listener(currentSetting, currentValue), () => {
+    listeners.delete(listener);
+  };
+}
+function useUserScheme() {
+  const [state, setState] = (0, import_react.useState)(() => getUserScheme());
+  return (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
+    if (typeof localStorage < "u") {
+      const stored = localStorage.getItem(storageKey);
+      stored && updateScheme(stored);
+    }
+    const dispose = onUserSchemeChange((setting, value) => {
+      setState({
+        setting,
+        value
+      });
+    });
+    return startWebListener(), dispose;
+  }, []), (0, import_react.useMemo)(() => ({
+    setting: state.setting,
+    value: state.value,
+    set: setUserScheme
+  }), [state.setting, state.value]);
+}