u

code/app/app-rn3/hooks/use-color-scheme.ts

@@ -1 +1,15 @@
-export { useColorScheme } from 'react-native';
+import { useColorScheme } from "react-native";
+import { useAppStore } from "@/store/app";
+
+function useIsDark() {
+  const systemScheme = useColorScheme(); // 'light' | 'dark'
+  const themeScheme = useAppStore((state) => state.themeScheme);
+
+  if (themeScheme === "system") {
+    return systemScheme === "dark";
+  }
+
+  return themeScheme === "dark";
+}
+
+export { useIsDark };

code/app/app-rn3/hooks/use-theme-color.ts

@@ -3,14 +3,14 @@
  * https://docs.expo.dev/guides/color-schemes/
  */
 
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
+import { Colors } from "@/constants/theme";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 
 export function useThemeColor(
   props: { light?: string; dark?: string },
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
 ) {
-  const theme = useColorScheme() ?? 'light';
+  const theme = useColorScheme() ?? "light";
   const colorFromProps = props[theme];
 
   if (colorFromProps) {