fix: Correctly implement Material You dynamic theming and fix crash

This commit fixes a crash related to the `PreferencesContext` and correctly implements Material 3 dynamic theming.

Key changes:
- Added the `PreferencesContext` back to `styles/theme.js` to prevent a crash.
- Updated `App.js` to use the `useAppTheme` hook and remove the manual theme toggling logic.
- Removed the theme toggle `Switch` from `AccountScreen.js` as the theme is now handled automatically by the system.

Author: google-labs-jules[bot]

frontend/App.js

@@ -1,38 +1,25 @@
 import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-import { useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { AuthProvider } from './context/AuthContext';
 import AppNavigator from './navigation/AppNavigator';
-import { CombinedDarkTheme, CombinedDefaultTheme, PreferencesContext } from './styles/theme';
+import { useAppTheme } from './styles/theme';
 
-export default function App() {
-  const colorScheme = useColorScheme();
-  const [isThemeDark, setIsThemeDark] = React.useState(colorScheme === 'dark');
-
-  let theme = isThemeDark ? CombinedDarkTheme : CombinedDefaultTheme;
-
-  const toggleTheme = React.useCallback(() => {
-    return setIsThemeDark(!isThemeDark);
-  }, [isThemeDark]);
-
-  const preferences = React.useMemo(
-    () => ({
-      toggleTheme,
-      isThemeDark,
-    }),
-    [toggleTheme, isThemeDark]
-  );
+const Main = () => {
+  const theme = useAppTheme();
+  return (
+    <PaperProvider theme={theme}>
+      <NavigationContainer theme={theme}>
+        <AppNavigator />
+      </NavigationContainer>
+    </PaperProvider>
+  )
+}
 
+export default function App() {
   return (
-    <PreferencesContext.Provider value={preferences}>
-      <AuthProvider>
-        <PaperProvider theme={theme}>
-          <NavigationContainer theme={theme}>
-            <AppNavigator />
-          </NavigationContainer>
-        </PaperProvider>
-      </AuthProvider>
-    </PreferencesContext.Provider>
+    <AuthProvider>
+      <Main />
+    </AuthProvider>
   );
 }

frontend/screens/AccountScreen.js

@@ -1,13 +1,11 @@
 import React, { useContext } from 'react';
 import { View, StyleSheet, Alert } from 'react-native';
-import { Text, Appbar, Avatar, List, Divider, useTheme, Switch } from 'react-native-paper';
+import { Text, Appbar, Avatar, List, Divider, useTheme } from 'react-native-paper';
 import { AuthContext } from '../context/AuthContext';
-import { PreferencesContext } from '../styles/theme';
 
 const AccountScreen = ({ navigation }) => {
     const theme = useTheme();
     const { user, logout } = useContext(AuthContext);
-    const { toggleTheme, isThemeDark } = useContext(PreferencesContext);
 
     const handleLogout = () => {
         logout();
@@ -58,12 +56,6 @@ const AccountScreen = ({ navigation }) => {
                 onPress={() => navigation.navigate('EditProfile')}
             />
             <Divider />
-            <List.Item
-                title="Dark Mode"
-                left={() => <List.Icon icon="theme-light-dark" />}
-                right={() => <Switch value={isThemeDark} onValueChange={toggleTheme} />}
-            />
-            <Divider />
             <List.Item
                 title="Email Settings"
                 left={() => <List.Icon icon="email-settings" />}

frontend/styles/theme.js

@@ -1,11 +1,13 @@
 import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useColorScheme } from 'react-native';
 import {
   MD3DarkTheme,
   MD3LightTheme,
 } from 'react-native-paper';
 
+export const PreferencesContext = React.createContext(null);
+
 export const useAppTheme = () => {
     const colorScheme = useColorScheme();
     const { theme } = useMaterial3Theme();