u

code/app/app-rn/store/app.ts

@@ -0,0 +1,64 @@
+import type { ColorSchemeName } from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { Appearance } from 'react-native'
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+export type ThemeScheme = 'light' | 'dark' | 'auto'
+
+interface AppState {
+  themeScheme: ThemeScheme
+  isDark: boolean
+
+  setThemeScheme: (theme: ThemeScheme) => void
+  syncWithSystem: () => void
+}
+
+function getIsDark(theme: ThemeScheme, system: ColorSchemeName) {
+  if (theme === 'auto') {
+    return system === 'dark'
+  }
+  return theme === 'dark'
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set, get) => {
+      const system = Appearance.getColorScheme()
+
+      return {
+        themeScheme: 'auto',
+
+        isDark: getIsDark('auto', system),
+
+        setThemeScheme: (theme) => {
+          const system = Appearance.getColorScheme()
+
+          set({
+            themeScheme: theme,
+            isDark: getIsDark(theme, system),
+          })
+        },
+
+        syncWithSystem: () => {
+          const { themeScheme } = get()
+          const system = Appearance.getColorScheme()
+
+          if (themeScheme === 'auto') {
+            set({
+              isDark: getIsDark(themeScheme, system),
+            })
+          }
+        },
+      }
+    },
+    {
+      name: 'app-storage',
+      partialize: state => ({
+        themeScheme: state.themeScheme,
+      }),
+
+      storage: createJSONStorage(() => AsyncStorage),
+    },
+  ),
+)