u

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

@@ -1,16 +1 @@
-import { useEffect, useState } from 'react'
-import { Appearance, useColorScheme } from 'react-native'
-import { useAppStore } from '@/store/app'
-
-function useIsDark() {
-  const system = useColorScheme()
-  const themeScheme = useAppStore(s => s.themeScheme)
-
-  if (themeScheme === 'auto') {
-    return system === 'dark'
-  }
-
-  return themeScheme === 'dark'
-}
-
-export { useColorScheme, useIsDark }
+export { useColorScheme } from 'react-native';

code/app/app-rn/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';
+}