feat: add expo mobile application source code

mobile/context/ThemeContext.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useColorScheme, Platform } from 'react-native';
+import { Theme } from '../constants/theme';
+import { storage } from '../utils/storage';
+import { useAppConfig } from './ConfigContext';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  colors: typeof Theme.dark;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+// Storage helper is now imported from utils/storage
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const systemColorScheme = useColorScheme();
+  const [mode, setRawMode] = useState<ThemeMode>('light');
+  const { config } = useAppConfig();
+
+  useEffect(() => {
+    loadTheme();
+  }, []);
+
+  const loadTheme = async () => {
+    const savedMode = await storage.get('theme_mode');
+    if (savedMode) {
+      setRawMode(savedMode as ThemeMode);
+    }
+  };
+
+  const setMode = async (newMode: ThemeMode) => {
+    setRawMode(newMode);
+    await storage.save('theme_mode', newMode);
+  };
+
+  const isDark = mode === 'system' ? systemColorScheme === 'dark' : mode === 'dark';
+
+  // Layer admin-controlled brand colors and logo on top of the static design tokens
+  // so consumers always receive the full palette (surfaceLight, glass, accent, etc).
+  const baseColors = isDark ? Theme.dark : Theme.light;
+  const colors = {
+    ...baseColors,
+    primary: config?.branding?.theme_color_primary || baseColors.primary,
+    accent: config?.branding?.theme_color_primary || baseColors.accent,
+    secondary: config?.branding?.theme_color_secondary || baseColors.secondary,
+    logo: config?.branding?.logo_url || null,
+  } as typeof Theme.dark & { logo: string | null };
+
+  return (
+    <ThemeContext.Provider value={{ mode, setMode, colors, isDark }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useAppTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    // Fallback safely instead of crashing — return the full design-token palette
+    return {
+      mode: 'light',
+      setMode: () => {},
+      isDark: false,
+      colors: { ...Theme.light, logo: null }
+    };
+  }
+  return context;
+}