u

code/app/app-rn4/src/hooks/use-color-scheme.ts

@@ -0,0 +1,15 @@
+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-rn4/src/hooks/use-color-scheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

code/app/app-rn4/src/hooks/use-theme-color.ts

@@ -0,0 +1,21 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+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,
+) {
+  const theme = useColorScheme() ?? "light";
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}