@vxrn/color-scheme 1.2.28 → 1.2.31

package/dist/esm/systemScheme.mjs

@@ -0,0 +1,16 @@
+import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
+import { useState } from "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] = useState("light");
+  return useIsomorphicLayoutEffect(() => {
+    setScheme(getSystemScheme());
+    const onChange = () => setScheme(getSystemScheme());
+    return media?.addEventListener("change", onChange), () => media?.removeEventListener("change", onChange);
+  }, []), scheme;
+}
+export { getSystemScheme, useSystemScheme };
+//# sourceMappingURL=systemScheme.mjs.map

package/dist/esm/systemScheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsomorphicLayoutEffect","useState","media","window","matchMedia","getSystemScheme","matches","useSystemScheme","scheme","setScheme","onChange","addEventListener","removeEventListener"],"sources":["../../src/systemScheme.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,QAAA,QAAgB;AAIzB,MAAMC,KAAA,GACJ,OAAOC,MAAA,GAAW,OAAeA,MAAA,CAAOC,UAAA,GACpCD,MAAA,CAAOC,UAAA,CAAW,8BAA8B,IAChD;AAEC,SAASC,gBAAA,EAA0B;EACxC,OAAOH,KAAA,EAAOI,OAAA,GAAU,SAAS;AACnC;AAEO,SAASC,gBAAA,EAA0B;EACxC,MAAM,CAACC,MAAA,EAAQC,SAAS,IAAIR,QAAA,CAAiB,OAAO;EAEpD,OAAAD,yBAAA,CAA0B,MAAM;IAC9BS,SAAA,CAAUJ,eAAA,CAAgB,CAAC;IAC3B,MAAMK,QAAA,GAAWA,CAAA,KAAMD,SAAA,CAAUJ,eAAA,CAAgB,CAAC;IAClD,OAAAH,KAAA,EAAOS,gBAAA,CAAiB,UAAUD,QAAQ,GACnC,MAAMR,KAAA,EAAOU,mBAAA,CAAoB,UAAUF,QAAQ;EAC5D,GAAG,EAAE,GAEEF,MAAA;AACT","ignoreList":[]}

package/dist/esm/systemScheme.native.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { Appearance } from "react-native";
+function getSystemScheme() {
+  return Appearance.getColorScheme() || "light";
+}
+function useSystemScheme() {
+  var [scheme, setScheme] = useState(getSystemScheme);
+  return useEffect(function () {
+    var subscription = Appearance.addChangeListener(function (param) {
+      var {
+        colorScheme
+      } = param;
+      setScheme(colorScheme || "light");
+    });
+    return function () {
+      return subscription.remove();
+    };
+  }, []), scheme;
+}
+export { getSystemScheme, useSystemScheme };
+//# sourceMappingURL=systemScheme.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useEffect","Appearance","getSystemScheme","getColorScheme","useSystemScheme","scheme","setScheme","subscription","addChangeListener","param","colorScheme","remove"],"sources":["../../src/systemScheme.native.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,SAAA,QAAiB;AACpC,SAASC,UAAA,QAAkB;AACpB,SAASC,gBAAA,EAAkB;EAC9B,OAAOD,UAAA,CAAWE,cAAA,CAAe,KAAK;AAC1C;AACO,SAASC,gBAAA,EAAkB;EAC9B,IAAI,CAACC,MAAA,EAAQC,SAAS,IAAIP,QAAA,CAASG,eAAe;EAClD,OAAAF,SAAA,CAAU,YAAW;IACjB,IAAIO,YAAA,GAAeN,UAAA,CAAWO,iBAAA,CAAkB,UAASC,KAAA,EAAO;MAC5D,IAAI;QAAEC;MAAY,IAAID,KAAA;MACtBH,SAAA,CAAUI,WAAA,IAAe,OAAO;IACpC,CAAC;IACD,OAAO,YAAW;MACd,OAAOH,YAAA,CAAaI,MAAA,CAAO;IAC/B;EACJ,GAAG,EAAE,GACEN,MAAA;AACX","ignoreList":[]}

package/dist/esm/userScheme.js

@@ -0,0 +1,67 @@
+import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
+import { useState, useMemo } from "react";
+
+import { getSystemScheme } from "./systemScheme";
+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" ? 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] = useState(() => getUserScheme());
+  return useIsomorphicLayoutEffect(() => {
+    if (typeof localStorage < "u") {
+      const stored = localStorage.getItem(storageKey);
+      stored && updateScheme(stored);
+    }
+    const dispose = onUserSchemeChange((setting, value) => {
+      setState({ setting, value });
+    });
+    return startWebListener(), dispose;
+  }, []), useMemo(
+    () => ({
+      setting: state.setting,
+      value: state.value,
+      set: setUserScheme
+    }),
+    [state.setting, state.value]
+  );
+}
+export {
+  getUserScheme,
+  onUserSchemeChange,
+  setUserScheme,
+  useUserScheme
+};
+//# sourceMappingURL=userScheme.js.map

package/dist/esm/userScheme.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/userScheme.ts"],
+  "mappings": "AAAA,SAAS,iCAAiC;AAC1C,SAAS,UAAU,eAAe;AAClC,OAA2B;AAC3B,SAAS,uBAAoC;AAe7C,MAAM,YAAY,oBAAI,IAAoB,GACpC,aAAa;AAEnB,IAAI,iBAAgC,UAChC,eAAuB,SAiBvB,iBAAiB;AACrB,SAAS,mBAAmB;AAC1B,MAAI,eAAgB;AACpB,mBAAiB;AAEjB,QAAM,UACJ,OAAO,SAAW,MAAc,OAAO,aAAa,8BAA8B,IAAI,MAElF,iBAAiB,MAAM;AAC3B,IAAI,mBAAmB,YACrB,sBAAsB;AAAA,EAE1B;AAEA,iBAAe,GACf,SAAS,mBAAmB,UAAU,cAAc;AACtD;AAEA,SAAS,aAAa,SAAgC;AACpD,SAAI,YAAY,WAIP,gBAAgB,IAElB;AACT;AAGA,SAAS,wBAAwB;AAC/B,QAAM,QAAQ,aAAa,QAAQ;AACnC,EAAI,UAAU,iBACZ,eAAe,OAMf,UAAU,QAAQ,CAAC,MAAM;AACvB,MAAE,gBAAgB,YAAY;AAAA,EAChC,CAAC;AAEL;AAEA,SAAS,aAAa,SAAwB;AAC5C,QAAM,QAAQ,YAAY,WAAW,aAAa,QAAQ,IAAI;AAE9D,GAAI,UAAU,gBAAgB,mBAAmB,aAC/C,iBAAiB,SACjB,eAAe,OAMf,UAAU,QAAQ,CAAC,MAAM;AACvB,MAAE,gBAAgB,YAAY;AAAA,EAChC,CAAC;AAEL;AAEO,SAAS,cAAc,SAAwB;AACpD,EAAI,OAAO,eAAiB,OAC1B,aAAa,QAAQ,YAAY,OAAO,GAE1C,aAAa,OAAO;AACtB;AAEO,SAAS,gBAA2D;AACzE,SAAO,EAAE,SAAS,gBAAgB,OAAO,aAAa;AACxD;AAEO,SAAS,mBAAmB,UAA0B;AAC3D,mBAAU,IAAI,QAAQ,GACtB,SAAS,gBAAgB,YAAY,GAC9B,MAAM;AACX,cAAU,OAAO,QAAQ;AAAA,EAC3B;AACF;AAEO,SAAS,gBAA4B;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM,cAAc,CAAC;AAExD,mCAA0B,MAAM;AAE9B,QAAI,OAAO,eAAiB,KAAa;AACvC,YAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,MAAI,UACF,aAAa,MAAM;AAAA,IAEvB;AAEA,UAAM,UAAU,mBAAmB,CAAC,SAAS,UAAU;AACrD,eAAS,EAAE,SAAS,MAAM,CAAC;AAAA,IAC7B,CAAC;AAED,4BAAiB,GAEV;AAAA,EACT,GAAG,CAAC,CAAC,GAEE;AAAA,IACL,OAAO;AAAA,MACL,SAAS,MAAM;AAAA,MACf,OAAO,MAAM;AAAA,MACb,KAAK;AAAA,IACP;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,KAAK;AAAA,EAC7B;AACF;",
+  "names": []
+}

package/dist/esm/userScheme.mjs

@@ -0,0 +1,68 @@
+import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
+import { useState, useMemo } from "react";
+import { getSystemScheme } from "./systemScheme.mjs";
+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" ? 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] = useState(() => getUserScheme());
+  return useIsomorphicLayoutEffect(() => {
+    if (typeof localStorage < "u") {
+      const stored = localStorage.getItem(storageKey);
+      stored && updateScheme(stored);
+    }
+    const dispose = onUserSchemeChange((setting, value) => {
+      setState({
+        setting,
+        value
+      });
+    });
+    return startWebListener(), dispose;
+  }, []), useMemo(() => ({
+    setting: state.setting,
+    value: state.value,
+    set: setUserScheme
+  }), [state.setting, state.value]);
+}
+export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme };
+//# sourceMappingURL=userScheme.mjs.map

package/dist/esm/userScheme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","getSystemScheme","listeners","Set","storageKey","currentSetting","currentValue","isWebListening","startWebListener","matcher","window","matchMedia","onSystemChange","updateValueFromSystem","addEventListener","resolveValue","setting","value","forEach","l","updateScheme","setUserScheme","localStorage","setItem","getUserScheme","onUserSchemeChange","listener","add","delete","useUserScheme","state","setState","stored","getItem","dispose","set"],"sources":["../../src/userScheme.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,QAAA,EAAUC,OAAA,QAAe;AAElC,SAASC,eAAA,QAAoC;AAe7C,MAAMC,SAAA,GAAY,mBAAIC,GAAA,CAAoB;EACpCC,UAAA,GAAa;AAEnB,IAAIC,cAAA,GAAgC;EAChCC,YAAA,GAAuB;EAiBvBC,cAAA,GAAiB;AACrB,SAASC,iBAAA,EAAmB;EAC1B,IAAID,cAAA,EAAgB;EACpBA,cAAA,GAAiB;EAEjB,MAAME,OAAA,GACJ,OAAOC,MAAA,GAAW,MAAcA,MAAA,CAAOC,UAAA,GAAa,8BAA8B,IAAI;IAElFC,cAAA,GAAiBA,CAAA,KAAM;MACvBP,cAAA,KAAmB,YACrBQ,qBAAA,CAAsB;IAE1B;EAEAD,cAAA,CAAe,GACfH,OAAA,EAASK,gBAAA,GAAmB,UAAUF,cAAc;AACtD;AAEA,SAASG,aAAaC,OAAA,EAAgC;EACpD,OAAIA,OAAA,KAAY,WAIPf,eAAA,CAAgB,IAElBe,OAAA;AACT;AAGA,SAASH,sBAAA,EAAwB;EAC/B,MAAMI,KAAA,GAAQF,YAAA,CAAa,QAAQ;EAC/BE,KAAA,KAAUX,YAAA,KACZA,YAAA,GAAeW,KAAA,EAMff,SAAA,CAAUgB,OAAA,CAASC,CAAA,IAAM;IACvBA,CAAA,CAAEd,cAAA,EAAgBC,YAAY;EAChC,CAAC;AAEL;AAEA,SAASc,aAAaJ,OAAA,EAAwB;EAC5C,MAAMC,KAAA,GAAQD,OAAA,KAAY,WAAWD,YAAA,CAAa,QAAQ,IAAIC,OAAA;EAE9D,CAAIC,KAAA,KAAUX,YAAA,IAAgBD,cAAA,KAAmBW,OAAA,MAC/CX,cAAA,GAAiBW,OAAA,EACjBV,YAAA,GAAeW,KAAA,EAMff,SAAA,CAAUgB,OAAA,CAASC,CAAA,IAAM;IACvBA,CAAA,CAAEd,cAAA,EAAgBC,YAAY;EAChC,CAAC;AAEL;AAEO,SAASe,cAAcL,OAAA,EAAwB;EAChD,OAAOM,YAAA,GAAiB,OAC1BA,YAAA,CAAaC,OAAA,CAAQnB,UAAA,EAAYY,OAAO,GAE1CI,YAAA,CAAaJ,OAAO;AACtB;AAEO,SAASQ,cAAA,EAA2D;EACzE,OAAO;IAAER,OAAA,EAASX,cAAA;IAAgBY,KAAA,EAAOX;EAAa;AACxD;AAEO,SAASmB,mBAAmBC,QAAA,EAA0B;EAC3D,OAAAxB,SAAA,CAAUyB,GAAA,CAAID,QAAQ,GACtBA,QAAA,CAASrB,cAAA,EAAgBC,YAAY,GAC9B,MAAM;IACXJ,SAAA,CAAU0B,MAAA,CAAOF,QAAQ;EAC3B;AACF;AAEO,SAASG,cAAA,EAA4B;EAC1C,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAIhC,QAAA,CAAS,MAAMyB,aAAA,CAAc,CAAC;EAExD,OAAA1B,yBAAA,CAA0B,MAAM;IAE9B,IAAI,OAAOwB,YAAA,GAAiB,KAAa;MACvC,MAAMU,MAAA,GAASV,YAAA,CAAaW,OAAA,CAAQ7B,UAAU;MAC1C4B,MAAA,IACFZ,YAAA,CAAaY,MAAM;IAEvB;IAEA,MAAME,OAAA,GAAUT,kBAAA,CAAmB,CAACT,OAAA,EAASC,KAAA,KAAU;MACrDc,QAAA,CAAS;QAAEf,OAAA;QAASC;MAAM,CAAC;IAC7B,CAAC;IAED,OAAAT,gBAAA,CAAiB,GAEV0B,OAAA;EACT,GAAG,EAAE,GAEElC,OAAA,CACL,OAAO;IACLgB,OAAA,EAASc,KAAA,CAAMd,OAAA;IACfC,KAAA,EAAOa,KAAA,CAAMb,KAAA;IACbkB,GAAA,EAAKd;EACP,IACA,CAACS,KAAA,CAAMd,OAAA,EAASc,KAAA,CAAMb,KAAK,CAC7B;AACF","ignoreList":[]}

package/dist/esm/userScheme.native.js

@@ -0,0 +1,80 @@
+import { useIsomorphicLayoutEffect } from "@vxrn/use-isomorphic-layout-effect";
+import { useState, useMemo } from "react";
+import { Appearance } from "react-native";
+import { getSystemScheme } from "./systemScheme.native.js";
+var listeners = /* @__PURE__ */new Set(),
+  storageKey = "vxrn-scheme",
+  currentSetting = "system",
+  currentValue = "light";
+Appearance.addChangeListener(function (next) {
+  currentSetting === "system" && next.colorScheme && updateValueFromSystem();
+});
+var cur = Appearance.getColorScheme();
+cur && currentSetting === "system" && (currentValue = cur);
+var isWebListening = !1;
+function startWebListener() {
+  var _window_matchMedia, _window, _matcher_addEventListener;
+  if (!isWebListening) {
+    isWebListening = !0;
+    var matcher = typeof window < "u" ? (_window_matchMedia = (_window = window).matchMedia) === null || _window_matchMedia === void 0 ? void 0 : _window_matchMedia.call(_window, "(prefers-color-scheme: dark)") : null,
+      onSystemChange = function () {
+        currentSetting === "system" && updateValueFromSystem();
+      };
+    onSystemChange(), matcher == null || (_matcher_addEventListener = matcher.addEventListener) === null || _matcher_addEventListener === void 0 || _matcher_addEventListener.call(matcher, "change", onSystemChange);
+  }
+}
+function resolveValue(setting) {
+  return setting === "system" ? Appearance.getColorScheme() || "light" : setting;
+}
+function updateValueFromSystem() {
+  var value = resolveValue("system");
+  value !== currentValue && (currentValue = value, Appearance.setColorScheme(value), listeners.forEach(function (l) {
+    l(currentSetting, currentValue);
+  }));
+}
+function updateScheme(setting) {
+  var value = setting === "system" ? resolveValue("system") : setting;
+  (value !== currentValue || currentSetting !== setting) && (currentSetting = setting, currentValue = value, Appearance.setColorScheme(value), listeners.forEach(function (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), function () {
+    listeners.delete(listener);
+  };
+}
+function useUserScheme() {
+  var [state, setState] = useState(function () {
+    return getUserScheme();
+  });
+  return useIsomorphicLayoutEffect(function () {
+    if (typeof localStorage < "u") {
+      var stored = localStorage.getItem(storageKey);
+      stored && updateScheme(stored);
+    }
+    var dispose = onUserSchemeChange(function (setting, value) {
+      setState({
+        setting,
+        value
+      });
+    });
+    return startWebListener(), dispose;
+  }, []), useMemo(function () {
+    return {
+      setting: state.setting,
+      value: state.value,
+      set: setUserScheme
+    };
+  }, [state.setting, state.value]);
+}
+export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme };
+//# sourceMappingURL=userScheme.native.js.map

package/dist/esm/userScheme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsomorphicLayoutEffect","useState","useMemo","Appearance","getSystemScheme","listeners","Set","storageKey","currentSetting","currentValue","addChangeListener","next","colorScheme","updateValueFromSystem","cur","getColorScheme","isWebListening","startWebListener","_window_matchMedia","_window","_matcher_addEventListener","matcher","window","matchMedia","call","onSystemChange","addEventListener","resolveValue","setting","value","setColorScheme","forEach","l","updateScheme","setUserScheme","localStorage","setItem","getUserScheme","onUserSchemeChange","listener","add","delete","useUserScheme","state","setState","stored","getItem","dispose"],"sources":["../../src/userScheme.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxrn/color-scheme",
-  "version": "1.2.28",
+  "version": "1.2.31",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
@@ -32,11 +32,10 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@vxrn/universal-color-scheme": "1.2.28",
-    "@vxrn/use-isomorphic-layout-effect": "1.2.28"
+    "@vxrn/use-isomorphic-layout-effect": "1.2.31"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.139.2",
+    "@tamagui/build": "^1.140.2",
     "react": "19.1.0",
     "react-native": "0.81.5"
   },

package/src/index.tsx

@@ -1,76 +1,36 @@
-import {
-  type ColorSchemeName,
-  setColorScheme,
-  useColorScheme as useColorSchemeBase,
-  useColorSchemeSetting,
-} from '@vxrn/universal-color-scheme'
 import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
-import { createContext, useContext, useMemo } from 'react'
+import type { Scheme } from './systemScheme'
+import { useUserScheme } from './userScheme'
 
-export type Scheme = 'light' | 'dark'
-export type SchemeSetting = 'system' | 'light' | 'dark'
+// re-export types
+export type { Scheme } from './systemScheme'
+export type { SchemeSetting, UserScheme } from './userScheme'
 
-export { getColorScheme, onColorSchemeChange } from '@vxrn/universal-color-scheme'
+// re-export core
+export { getSystemScheme, useSystemScheme } from './systemScheme'
+export { getUserScheme, onUserSchemeChange, setUserScheme, useUserScheme } from './userScheme'
 
 const storageKey = 'vxrn-scheme'
 
-export const clearColorSchemeSetting = () => {
-  setSchemeSetting('system')
-}
-
-const getSetting = (): SchemeSetting =>
-  (typeof localStorage !== 'undefined' && (localStorage.getItem(storageKey) as SchemeSetting)) ||
-  'system'
-
-const SchemeContext = createContext<{
-  setting: SchemeSetting
-  scheme: 'light' | 'dark'
-}>({
-  setting: 'system',
-  scheme: 'light',
-})
-
-export const useColorScheme = () => {
-  const [state] = useColorSchemeBase()
-  return [state, setSchemeSetting] as const
-}
-
-export function useSchemeSetting() {
-  const values = useContext(SchemeContext)
-  return [values, setSchemeSetting] as const
-}
-
-export function setSchemeSetting(next: SchemeSetting) {
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(storageKey, next)
-  }
-  setColorScheme(next)
-}
-
 export function SchemeProvider({
   children,
-  // defaults to tamagui-compatible
   getClassName = (name) => `t_${name}`,
 }: {
   children: any
-  getClassName?: (name: ColorSchemeName) => string
+  getClassName?: (name: Scheme) => string
 }) {
-  const [colorSchemeSetting] = useColorSchemeSetting()
-  const [colorScheme] = useColorScheme()
+  const { value } = useUserScheme()
 
   if (process.env.TAMAGUI_TARGET !== 'native') {
     useIsomorphicLayoutEffect(() => {
-      // on startup lets set from localstorage
-      setColorScheme(getSetting())
-
-      const toAdd = getClassName(colorScheme)
+      const toAdd = getClassName(value)
       const { 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])
+    }, [value])
   }
 
   return (
@@ -79,59 +39,42 @@ export function SchemeProvider({
         <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')}')
+`,
           }}
         />
       )}
-      <SchemeContext.Provider
-        value={useMemo(
-          () => ({
-            scheme: colorScheme,
-            setting: colorSchemeSetting,
-          }),
-          [colorScheme, colorSchemeSetting]
-        )}
-      >
-        {children}
-      </SchemeContext.Provider>
+      {children}
     </>
   )
 }
 
-export const MetaTheme = ({
+export function MetaTheme({
   color,
   darkColor,
   lightColor,
 }: {
-  color: string
+  color?: string
   darkColor: string
   lightColor: string
-}) => {
-  const [colorScheme] = useColorScheme()
+}) {
+  const { value } = useUserScheme()
 
   return (
     <>
-      {/* itemProp removes hoisting - react wasnt de-duping it properly causing two in DOM */}
-      {/* maybe bug in safari or react */}
       <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
         id="vxrn-theme-color"
         name="theme-color"
-        content={color ?? (colorScheme === 'dark' ? darkColor : lightColor)}
+        content={color ?? (value === 'dark' ? darkColor : lightColor)}
       />
-
-      {/* ssr compat theme-color */}
       <script
         id="meta-theme-hydrate"
         dangerouslySetInnerHTML={{
@@ -140,7 +83,7 @@ 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/src/systemScheme.native.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react'
+import { Appearance } from 'react-native'
+
+export type Scheme = 'light' | 'dark'
+
+export function getSystemScheme(): Scheme {
+  return Appearance.getColorScheme() || 'light'
+}
+
+export function useSystemScheme(): Scheme {
+  const [scheme, setScheme] = useState<Scheme>(getSystemScheme)
+
+  useEffect(() => {
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      setScheme(colorScheme || 'light')
+    })
+    return () => subscription.remove()
+  }, [])
+
+  return scheme
+}

package/src/systemScheme.ts

@@ -0,0 +1,26 @@
+import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
+import { useState } from 'react'
+
+export type Scheme = 'light' | 'dark'
+
+const media =
+  typeof window !== 'undefined' && window.matchMedia
+    ? window.matchMedia('(prefers-color-scheme: dark)')
+    : null
+
+export function getSystemScheme(): Scheme {
+  return media?.matches ? 'dark' : 'light'
+}
+
+export function useSystemScheme(): Scheme {
+  const [scheme, setScheme] = useState<Scheme>('light')
+
+  useIsomorphicLayoutEffect(() => {
+    setScheme(getSystemScheme())
+    const onChange = () => setScheme(getSystemScheme())
+    media?.addEventListener('change', onChange)
+    return () => media?.removeEventListener('change', onChange)
+  }, [])
+
+  return scheme
+}