Mobile App design

apps/frontend-mobile/components/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { useThemeStore } from '../store/themeStore';
+import { colors, darkColors } from '../constants/theme';
+import type { AppColors } from '../hooks/useThemeColor';
+
+interface ThemeContextValue {
+  colors: AppColors;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  colors,
+  isDark: false,
+});
+
+export function useThemeContext() {
+  return useContext(ThemeContext);
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const systemScheme = useColorScheme();
+  const mode = useThemeStore((s) => s.mode);
+  const init = useThemeStore((s) => s.init);
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  const value = useMemo(() => {
+    const isDark = mode === 'dark' || (mode === 'system' && systemScheme === 'dark');
+    return {
+      colors: isDark ? darkColors : colors,
+      isDark,
+    };
+  }, [mode, systemScheme]);
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}