init

src/theme/ThemeProvider.tsx

@@ -0,0 +1,36 @@
+/**
+ * MD3 ThemeProvider — React Context bridge between zustand settings and MD3 tokens.
+ *
+ * Wraps the app and exposes `useTheme()` which returns the fully resolved
+ * MD3Theme object (colors, typography, elevation, shape, spacing).
+ */
+
+import React, {createContext, useContext, useMemo} from 'react';
+import {useColorScheme} from 'react-native';
+import {useSettingsStore} from '../store/settingsStore';
+import {LightTheme, DarkTheme} from './md3';
+import type {MD3Theme} from './md3';
+
+const ThemeContext = createContext<MD3Theme>(LightTheme);
+
+export const ThemeProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
+  const themeSetting = useSettingsStore(s => s.theme);
+  const systemScheme = useColorScheme();
+
+  const resolvedTheme = useMemo<MD3Theme>(() => {
+    if (themeSetting === 'dark') return DarkTheme;
+    if (themeSetting === 'light') return LightTheme;
+    return systemScheme === 'dark' ? DarkTheme : LightTheme;
+  }, [themeSetting, systemScheme]);
+
+  return (
+    <ThemeContext.Provider value={resolvedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+/**
+ * Hook to access the full MD3 theme from anywhere in the tree.
+ */
+export const useTheme = (): MD3Theme => useContext(ThemeContext);