auto-commit for 4b34bc9d-cd30-4d24-924a-46c6cece2da1

frontend/src/contexts/ThemeContext.tsx

@@ -0,0 +1,83 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+interface ThemeContextType {
+  isDarkMode: boolean;
+  toggleTheme: () => void;
+  colors: {
+    background: string;
+    card: string;
+    text: string;
+    textSecondary: string;
+    primary: string;
+    border: string;
+    error: string;
+  };
+}
+
+const lightColors = {
+  background: '#F8F9FA',
+  card: '#FFFFFF',
+  text: '#1F2937',
+  textSecondary: '#6B7280',
+  primary: '#EE2A35',
+  border: '#E5E7EB',
+  error: '#EF4444',
+};
+
+const darkColors = {
+  background: '#111827',
+  card: '#1F2937',
+  text: '#F9FAFB',
+  textSecondary: '#9CA3AF',
+  primary: '#EE2A35',
+  border: '#374151',
+  error: '#F87171',
+};
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    loadTheme();
+  }, []);
+
+  const loadTheme = async () => {
+    try {
+      const savedTheme = await AsyncStorage.getItem('appTheme');
+      if (savedTheme === 'dark') {
+        setIsDarkMode(true);
+      }
+    } catch (error) {
+      console.error('Error loading theme:', error);
+    }
+  };
+
+  const toggleTheme = async () => {
+    const newMode = !isDarkMode;
+    setIsDarkMode(newMode);
+    try {
+      await AsyncStorage.setItem('appTheme', newMode ? 'dark' : 'light');
+    } catch (error) {
+      console.error('Error saving theme:', error);
+    }
+  };
+
+  const colors = isDarkMode ? darkColors : lightColors;
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme, colors }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}