@kbach/react 0.1.3 → 0.1.5

package/README.md

@@ -12,7 +12,7 @@ Tailwind-like utility classes for **React (web)**. Classes are converted to inli
 
 ## Install
 
-```bash
+```
 npm install @kbach/react
 ```
 
@@ -22,7 +22,7 @@ npm install @kbach/react
 
 **tsconfig.json**
 
-```jsonc
+```
 {
   "compilerOptions": {
     "jsx": "react-jsx",
@@ -33,7 +33,7 @@ npm install @kbach/react
 
 **Vite**
 
-```js
+```
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
@@ -45,7 +45,7 @@ export default defineConfig({
 
 **Babel**
 
-```js
+```
 // babel.config.js
 module.exports = {
   presets: [
@@ -232,7 +232,7 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 
 ## Configuration
 
-```js
+```
 // kbach.config.js
 module.exports = {
   darkMode: 'attribute', // 'attribute' | 'class' | 'media'

package/dist/index.js

@@ -115,7 +115,8 @@ function ThemeProvider({
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     if (Appearance) {
-      return Appearance.getColorScheme() === "dark" ? "dark" : "light";
+      const scheme = Appearance.getColorScheme();
+      return scheme === "dark" ? "dark" : "light";
     }
     return "light";
   }, []);
@@ -143,6 +144,14 @@ function ThemeProvider({
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
   const setSystemSchemeRef = (0, import_react2.useRef)(setSystemScheme);
   setSystemSchemeRef.current = setSystemScheme;
+  (0, import_react2.useEffect)(() => {
+    if (Appearance) {
+      const scheme = Appearance.getColorScheme();
+      if (scheme != null) {
+        setSystemSchemeRef.current(scheme === "dark" ? "dark" : "light");
+      }
+    }
+  }, []);
   (0, import_react2.useEffect)(() => {
     if (import_core.isWeb && typeof window !== "undefined") {
       const mq = window.matchMedia?.("(prefers-color-scheme: dark)");

package/dist/index.mjs

@@ -80,7 +80,8 @@ function ThemeProvider({
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
     if (Appearance) {
-      return Appearance.getColorScheme() === "dark" ? "dark" : "light";
+      const scheme = Appearance.getColorScheme();
+      return scheme === "dark" ? "dark" : "light";
     }
     return "light";
   }, []);
@@ -108,6 +109,14 @@ function ThemeProvider({
   }, [isDark, resolvedMode, resolvedConfig.darkMode]);
   const setSystemSchemeRef = useRef(setSystemScheme);
   setSystemSchemeRef.current = setSystemScheme;
+  useEffect(() => {
+    if (Appearance) {
+      const scheme = Appearance.getColorScheme();
+      if (scheme != null) {
+        setSystemSchemeRef.current(scheme === "dark" ? "dark" : "light");
+      }
+    }
+  }, []);
   useEffect(() => {
     if (isWeb && typeof window !== "undefined") {
       const mq = window.matchMedia?.("(prefers-color-scheme: dark)");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -36,7 +36,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@kbach/core": "0.1.0"
+    "@kbach/core": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",