fitst commit

components/ThemeContext.tsx

@@ -0,0 +1,59 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Appearance } from 'react-native';
+
+type ThemeType = 'light' | 'dark';
+
+interface ThemeContextProps {
+  theme: ThemeType;
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps | null>(null);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const systemTheme = Appearance.getColorScheme();
+
+  const [theme, setTheme] = useState<ThemeType>(systemTheme === 'dark' ? 'dark' : 'light');
+
+  // 🔹 Load saved theme
+  useEffect(() => {
+    (async () => {
+      const savedTheme = await AsyncStorage.getItem('APP_THEME');
+      if (savedTheme === 'dark' || savedTheme === 'light') {
+        setTheme(savedTheme);
+      }
+    })();
+  }, []);
+
+  // 🔹 Save theme
+  useEffect(() => {
+    AsyncStorage.setItem('APP_THEME', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        isDark: theme === 'dark',
+        toggleTheme,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+// Custom hook
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used inside ThemeProvider');
+  }
+  return ctx;
+}