@kbach/react 0.2.2 → 0.2.4

package/dist/index.d.mts

@@ -142,14 +142,29 @@ declare function useTheme(): ThemeContextValue;
 
 interface ThemeProviderProps {
     children: ReactNode;
-    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
+    /**
+     * Explicit color scheme override for native with `defaultMode="system"`.
+     *
+     * On some Android devices the system scheme is not detected on startup
+     * (the `appearanceChanged` event only fires on *changes*, not on launch when
+     * the device was already dark). Pass `useColorScheme()` from `react-native`
+     * here to guarantee correct detection:
+     *
+     * ```tsx
+     * import { useColorScheme } from 'react-native';
+     * const scheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={scheme}>…</ThemeProvider>
+     * ```
+     */
+    colorScheme?: 'light' | 'dark' | null;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
-    /** Disable persistence to localStorage / AsyncStorage */
+    /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme: colorSchemeProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {

package/dist/index.d.ts

@@ -142,14 +142,29 @@ declare function useTheme(): ThemeContextValue;
 
 interface ThemeProviderProps {
     children: ReactNode;
-    /** Default mode on first render. Falls back to persisted value, then 'system'. */
+    /** Initial mode. Falls back to persisted value, then 'system'. */
     defaultMode?: ThemeMode;
+    /**
+     * Explicit color scheme override for native with `defaultMode="system"`.
+     *
+     * On some Android devices the system scheme is not detected on startup
+     * (the `appearanceChanged` event only fires on *changes*, not on launch when
+     * the device was already dark). Pass `useColorScheme()` from `react-native`
+     * here to guarantee correct detection:
+     *
+     * ```tsx
+     * import { useColorScheme } from 'react-native';
+     * const scheme = useColorScheme();
+     * <ThemeProvider defaultMode="system" colorScheme={scheme}>…</ThemeProvider>
+     * ```
+     */
+    colorScheme?: 'light' | 'dark' | null;
     /** Override the config (useful for per-tree config). Defaults to global getConfig(). */
     config?: FrameworkConfig;
-    /** Disable persistence to localStorage / AsyncStorage */
+    /** Disable persistence to localStorage */
     disablePersistence?: boolean;
 }
-declare function ThemeProvider({ children, defaultMode, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
+declare function ThemeProvider({ children, defaultMode, colorScheme: colorSchemeProp, config: configOverride, disablePersistence, }: ThemeProviderProps): React__default.JSX.Element;
 
 type ToggleVariant = 'button' | 'switch' | 'icon-button';
 interface ThemeToggleProps {

package/dist/index.js

@@ -2065,17 +2065,15 @@ function subscribeGlobalDarkMode(callback) {
 
 // src/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Appearance;
+var _useColorScheme;
 try {
-  ({ Appearance } = require("react-native"));
+  ({ useColorScheme: _useColorScheme } = require("react-native"));
 } catch {
 }
 var STORAGE_KEY = "kbach-theme";
 function loadPersistedMode() {
   try {
-    if (isWeb) {
-      return localStorage.getItem(STORAGE_KEY);
-    }
+    if (isWeb) return localStorage.getItem(STORAGE_KEY);
     return null;
   } catch {
     return null;
@@ -2100,23 +2098,23 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
+  colorScheme: colorSchemeProp,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = (0, import_react2.useState)(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const getSystemScheme = (0, import_react2.useCallback)(() => {
+  const [nativeSchemeFallback, setNativeSchemeFallback] = (0, import_react2.useState)(null);
+  const hookScheme = _useColorScheme?.();
+  const nativeScheme = colorSchemeProp !== void 0 ? colorSchemeProp ?? null : hookScheme ?? nativeSchemeFallback;
+  const [webScheme, setWebScheme] = (0, import_react2.useState)(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
-    if (Appearance) {
-      const scheme = Appearance.getColorScheme();
-      return scheme === "dark" ? "dark" : "light";
-    }
     return "light";
-  }, []);
-  const [systemScheme, setSystemScheme] = (0, import_react2.useState)(getSystemScheme);
+  });
+  const systemScheme = isWeb ? webScheme : nativeScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = (0, import_react2.useState)(() => {
     if (!disablePersistence) {
       const persisted = loadPersistedMode();
@@ -2135,36 +2133,32 @@ function ThemeProvider({
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
   (0, import_react2.useEffect)(() => {
-    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    setGlobalDarkMode(isDark);
-  }, [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");
+    if (isWeb) return;
+    try {
+      const { TurboModuleRegistry } = require("react-native");
+      const native = TurboModuleRegistry?.get?.("Appearance");
+      const scheme = native?.getColorScheme?.();
+      if (scheme === "dark" || scheme === "light") {
+        setNativeSchemeFallback(scheme);
       }
+    } catch {
     }
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (isWeb && typeof window !== "undefined") {
-      const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-      if (!mq) return;
-      const handler = (e) => {
-        setSystemSchemeRef.current(e.matches ? "dark" : "light");
-      };
-      mq.addEventListener("change", handler);
-      return () => mq.removeEventListener("change", handler);
-    }
-    if (Appearance) {
-      const sub = Appearance.addChangeListener(({ colorScheme }) => {
-        setSystemSchemeRef.current(colorScheme === "dark" ? "dark" : "light");
-      });
-      return () => sub.remove();
-    }
-    return void 0;
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    setGlobalDarkMode(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  const setWebSchemeRef = (0, import_react2.useRef)(setWebScheme);
+  setWebSchemeRef.current = setWebScheme;
+  (0, import_react2.useEffect)(() => {
+    if (!isWeb || typeof window === "undefined") return;
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!mq) return;
+    const handler = (e) => {
+      setWebSchemeRef.current(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
   }, []);
   (0, import_react2.useEffect)(() => {
     if (configOverride) return;

package/dist/index.mjs

@@ -39,17 +39,15 @@ import {
   useState
 } from "react";
 import { jsx } from "react/jsx-runtime";
-var Appearance;
+var _useColorScheme;
 try {
-  ({ Appearance } = __require("react-native"));
+  ({ useColorScheme: _useColorScheme } = __require("react-native"));
 } catch {
 }
 var STORAGE_KEY = "kbach-theme";
 function loadPersistedMode() {
   try {
-    if (isWeb) {
-      return localStorage.getItem(STORAGE_KEY);
-    }
+    if (isWeb) return localStorage.getItem(STORAGE_KEY);
     return null;
   } catch {
     return null;
@@ -74,23 +72,23 @@ function applyWebTheme(resolvedMode, strategy) {
 function ThemeProvider({
   children,
   defaultMode = "system",
+  colorScheme: colorSchemeProp,
   config: configOverride,
   disablePersistence = false
 }) {
   const [resolvedConfig, setResolvedConfig] = useState(
     () => configOverride ? buildConfig(configOverride) : getConfig()
   );
-  const getSystemScheme = useCallback(() => {
+  const [nativeSchemeFallback, setNativeSchemeFallback] = useState(null);
+  const hookScheme = _useColorScheme?.();
+  const nativeScheme = colorSchemeProp !== void 0 ? colorSchemeProp ?? null : hookScheme ?? nativeSchemeFallback;
+  const [webScheme, setWebScheme] = useState(() => {
     if (isWeb && typeof window !== "undefined") {
       return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     }
-    if (Appearance) {
-      const scheme = Appearance.getColorScheme();
-      return scheme === "dark" ? "dark" : "light";
-    }
     return "light";
-  }, []);
-  const [systemScheme, setSystemScheme] = useState(getSystemScheme);
+  });
+  const systemScheme = isWeb ? webScheme : nativeScheme === "dark" ? "dark" : "light";
   const [mode, _setMode] = useState(() => {
     if (!disablePersistence) {
       const persisted = loadPersistedMode();
@@ -109,36 +107,32 @@ function ThemeProvider({
   const isDark = resolvedMode === "dark";
   syncGlobalDarkMode(isDark);
   useEffect(() => {
-    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
-    setGlobalDarkMode(isDark);
-  }, [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");
+    if (isWeb) return;
+    try {
+      const { TurboModuleRegistry } = __require("react-native");
+      const native = TurboModuleRegistry?.get?.("Appearance");
+      const scheme = native?.getColorScheme?.();
+      if (scheme === "dark" || scheme === "light") {
+        setNativeSchemeFallback(scheme);
       }
+    } catch {
     }
   }, []);
   useEffect(() => {
-    if (isWeb && typeof window !== "undefined") {
-      const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-      if (!mq) return;
-      const handler = (e) => {
-        setSystemSchemeRef.current(e.matches ? "dark" : "light");
-      };
-      mq.addEventListener("change", handler);
-      return () => mq.removeEventListener("change", handler);
-    }
-    if (Appearance) {
-      const sub = Appearance.addChangeListener(({ colorScheme }) => {
-        setSystemSchemeRef.current(colorScheme === "dark" ? "dark" : "light");
-      });
-      return () => sub.remove();
-    }
-    return void 0;
+    applyWebTheme(resolvedMode, resolvedConfig.darkMode);
+    setGlobalDarkMode(isDark);
+  }, [isDark, resolvedMode, resolvedConfig.darkMode]);
+  const setWebSchemeRef = useRef(setWebScheme);
+  setWebSchemeRef.current = setWebScheme;
+  useEffect(() => {
+    if (!isWeb || typeof window === "undefined") return;
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!mq) return;
+    const handler = (e) => {
+      setWebSchemeRef.current(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
   }, []);
   useEffect(() => {
     if (configOverride) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",