@vxrn/color-scheme 1.2.46 → 1.2.47

package/dist/cjs/systemScheme.native.js

@@ -34,14 +34,23 @@ function getSystemScheme() {
 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");
-    });
+    var appearanceSubscription = import_react_native.Appearance.addChangeListener(function (param) {
+        var {
+          colorScheme
+        } = param;
+        setScheme(colorScheme || "light");
+      }),
+      handleAppStateChange = function (nextAppState) {
+        if (nextAppState === "active") {
+          var currentScheme = getSystemScheme();
+          setScheme(function (prev) {
+            return prev !== currentScheme ? currentScheme : prev;
+          });
+        }
+      },
+      appStateSubscription = import_react_native.AppState.addEventListener("change", handleAppStateChange);
     return function () {
-      return subscription.remove();
+      appearanceSubscription.remove(), appStateSubscription.remove();
     };
   }, []), scheme;
 }

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

@@ -1 +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":[]}
+{"version":3,"names":["systemScheme_native_exports","__export","getSystemScheme","useSystemScheme","module","exports","__toCommonJS","import_react","require","import_react_native","Appearance","getColorScheme","scheme","setScheme","useState","useEffect","appearanceSubscription","addChangeListener","param","colorScheme","handleAppStateChange","nextAppState","currentScheme","prev","appStateSubscription","AppState","addEventListener","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,GAAqCD,OAAA;AAC9B,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;IAEjB,IAAIC,sBAAA,GAAyBP,mBAAA,CAAAC,UAAA,CAAWO,iBAAA,CAAkB,UAASC,KAAA,EAAO;QACtE,IAAI;UAAEC;QAAY,IAAID,KAAA;QACtBL,SAAA,CAAUM,WAAA,IAAe,OAAO;MACpC,CAAC;MAGGC,oBAAA,GAAuB,SAAAA,CAASC,YAAA,EAAc;QAC9C,IAAIA,YAAA,KAAiB,UAAU;UAC3B,IAAIC,aAAA,GAAgBpB,eAAA,CAAgB;UACpCW,SAAA,CAAU,UAASU,IAAA,EAAM;YACrB,OAAOA,IAAA,KAASD,aAAA,GAAgBA,aAAA,GAAgBC,IAAA;UACpD,CAAC;QACL;MACJ;MACIC,oBAAA,GAAuBf,mBAAA,CAAAgB,QAAA,CAASC,gBAAA,CAAiB,UAAUN,oBAAoB;IACnF,OAAO,YAAW;MACdJ,sBAAA,CAAuBW,MAAA,CAAO,GAC9BH,oBAAA,CAAqBG,MAAA,CAAO;IAChC;EACJ,GAAG,EAAE,GACEf,MAAA;AACX","ignoreList":[]}

package/dist/esm/systemScheme.native.js

@@ -1,19 +1,28 @@
 import { useState, useEffect } from "react";
-import { Appearance } from "react-native";
+import { Appearance, AppState } 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");
-    });
+    var appearanceSubscription = Appearance.addChangeListener(function (param) {
+        var {
+          colorScheme
+        } = param;
+        setScheme(colorScheme || "light");
+      }),
+      handleAppStateChange = function (nextAppState) {
+        if (nextAppState === "active") {
+          var currentScheme = getSystemScheme();
+          setScheme(function (prev) {
+            return prev !== currentScheme ? currentScheme : prev;
+          });
+        }
+      },
+      appStateSubscription = AppState.addEventListener("change", handleAppStateChange);
     return function () {
-      return subscription.remove();
+      appearanceSubscription.remove(), appStateSubscription.remove();
     };
   }, []), scheme;
 }

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

@@ -1 +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":[]}
+{"version":3,"names":["useState","useEffect","Appearance","AppState","getSystemScheme","getColorScheme","useSystemScheme","scheme","setScheme","appearanceSubscription","addChangeListener","param","colorScheme","handleAppStateChange","nextAppState","currentScheme","prev","appStateSubscription","addEventListener","remove"],"sources":["../../src/systemScheme.native.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,QAAA,EAAUC,SAAA,QAAiB;AACpC,SAASC,UAAA,EAAYC,QAAA,QAAgB;AAC9B,SAASC,gBAAA,EAAkB;EAC9B,OAAOF,UAAA,CAAWG,cAAA,CAAe,KAAK;AAC1C;AACO,SAASC,gBAAA,EAAkB;EAC9B,IAAI,CAACC,MAAA,EAAQC,SAAS,IAAIR,QAAA,CAASI,eAAe;EAClD,OAAAH,SAAA,CAAU,YAAW;IAEjB,IAAIQ,sBAAA,GAAyBP,UAAA,CAAWQ,iBAAA,CAAkB,UAASC,KAAA,EAAO;QACtE,IAAI;UAAEC;QAAY,IAAID,KAAA;QACtBH,SAAA,CAAUI,WAAA,IAAe,OAAO;MACpC,CAAC;MAGGC,oBAAA,GAAuB,SAAAA,CAASC,YAAA,EAAc;QAC9C,IAAIA,YAAA,KAAiB,UAAU;UAC3B,IAAIC,aAAA,GAAgBX,eAAA,CAAgB;UACpCI,SAAA,CAAU,UAASQ,IAAA,EAAM;YACrB,OAAOA,IAAA,KAASD,aAAA,GAAgBA,aAAA,GAAgBC,IAAA;UACpD,CAAC;QACL;MACJ;MACIC,oBAAA,GAAuBd,QAAA,CAASe,gBAAA,CAAiB,UAAUL,oBAAoB;IACnF,OAAO,YAAW;MACdJ,sBAAA,CAAuBU,MAAA,CAAO,GAC9BF,oBAAA,CAAqBE,MAAA,CAAO;IAChC;EACJ,GAAG,EAAE,GACEZ,MAAA;AACX","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxrn/color-scheme",
-  "version": "1.2.46",
+  "version": "1.2.47",
   "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
@@ -32,7 +32,7 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@vxrn/use-isomorphic-layout-effect": "1.2.46"
+    "@vxrn/use-isomorphic-layout-effect": "1.2.47"
   },
   "devDependencies": {
     "@tamagui/build": "^1.142.0",

package/src/systemScheme.native.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Appearance } from 'react-native'
+import { Appearance, AppState, type AppStateStatus } from 'react-native'
 
 export type Scheme = 'light' | 'dark'
 
@@ -11,10 +11,26 @@ export function useSystemScheme(): Scheme {
   const [scheme, setScheme] = useState<Scheme>(getSystemScheme)
 
   useEffect(() => {
-    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+    // Listen for appearance changes while app is active
+    const appearanceSubscription = Appearance.addChangeListener(({ colorScheme }) => {
       setScheme(colorScheme || 'light')
     })
-    return () => subscription.remove()
+
+    // Also check when app comes back to foreground, as appearance change
+    // events may not fire if the theme changed while app was in background
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (nextAppState === 'active') {
+        const currentScheme = getSystemScheme()
+        setScheme((prev) => (prev !== currentScheme ? currentScheme : prev))
+      }
+    }
+
+    const appStateSubscription = AppState.addEventListener('change', handleAppStateChange)
+
+    return () => {
+      appearanceSubscription.remove()
+      appStateSubscription.remove()
+    }
   }, [])
 
   return scheme

package/types/systemScheme.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"systemScheme.native.d.ts","sourceRoot":"","sources":["../src/systemScheme.native.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,wBAAgB,eAAe,IAAI,MAAM,CAWxC"}
+{"version":3,"file":"systemScheme.native.d.ts","sourceRoot":"","sources":["../src/systemScheme.native.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,wBAAgB,eAAe,IAAI,MAAM,CA2BxC"}