feat(mobile): Implement persistent theme selection

MobileApp/context/ThemeContext.tsx

@@ -0,0 +1,60 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { useColorScheme as useNativeColorScheme } from 'react-native';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+    themeMode: ThemeMode;
+    setThemeMode: (mode: ThemeMode) => void;
+    colorScheme: 'light' | 'dark'; // The actual active scheme
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+    themeMode: 'system',
+    setThemeMode: () => { },
+    colorScheme: 'light',
+});
+
+export const THEME_STORAGE_KEY = 'user_theme_preference';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+    const systemColorScheme = useNativeColorScheme();
+    const [themeMode, setThemeModeState] = useState<ThemeMode>('system');
+    const [isReady, setIsReady] = useState(false);
+
+    useEffect(() => {
+        // Load preference from storage on mount
+        AsyncStorage.getItem(THEME_STORAGE_KEY).then((value) => {
+            if (value && (value === 'light' || value === 'dark' || value === 'system')) {
+                setThemeModeState(value as ThemeMode);
+            }
+            setIsReady(true);
+        });
+    }, []);
+
+    const setThemeMode = async (mode: ThemeMode) => {
+        setThemeModeState(mode);
+        await AsyncStorage.setItem(THEME_STORAGE_KEY, mode);
+    };
+
+    // Determine effective color scheme
+    const colorScheme =
+        themeMode === 'system'
+            ? (systemColorScheme ?? 'light')
+            : themeMode;
+
+    if (!isReady) {
+        return null; // Or a splash screen
+    }
+
+    return (
+        <ThemeContext.Provider value={{ themeMode, setThemeMode, colorScheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    return useContext(ThemeContext);
+}