fix: Correctly implement Material 3 dynamic theming

This commit fixes the implementation of Material 3 dynamic theming by following the official `react-native-paper` documentation.

Key changes:
- Removed the `@pchmn/expo-material3-theme` dependency.
- Updated `styles/theme.js` to correctly handle dark and light modes using `MD3LightTheme`, `MD3DarkTheme`, and `adaptNavigationTheme`.
- Created a `PreferencesContext` to manage theme toggling.
- Updated `App.js` to use `useColorScheme` and provide the correct theme to both `PaperProvider` and `NavigationContainer`.
- Added a `Switch` to the `AccountScreen` to allow you to toggle between light and dark themes.
- Installed `deepmerge` to combine theme objects.

Author: google-labs-jules[bot]

frontend/App.js

@@ -1,22 +1,38 @@
+import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-import AppNavigator from './navigation/AppNavigator';
+import { useColorScheme } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { AuthProvider } from './context/AuthContext';
-import { useAppTheme } from './styles/theme';
-
-const Main = () => {
-  const theme = useAppTheme();
-  return (
-    <PaperProvider theme={theme}>
-      <AppNavigator />
-    </PaperProvider>
-  )
-}
+import AppNavigator from './navigation/AppNavigator';
+import { CombinedDarkTheme, CombinedDefaultTheme, PreferencesContext } 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]
+  );
+
   return (
-    <AuthProvider>
-      <Main />
-    </AuthProvider>
+    <PreferencesContext.Provider value={preferences}>
+      <AuthProvider>
+        <PaperProvider theme={theme}>
+          <NavigationContainer theme={theme}>
+            <AppNavigator />
+          </NavigationContainer>
+        </PaperProvider>
+      </AuthProvider>
+    </PreferencesContext.Provider>
   );
 }

frontend/frontend/frontend/package-lock.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~5.0.4",
-    "@pchmn/expo-material3-theme": "^1.0.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-navigation/bottom-tabs": "^7.4.4",
     "@react-navigation/native": "^7.1.16",
     "@react-navigation/native-stack": "^7.3.23",
     "axios": "^1.11.0",
+    "deepmerge": "^4.3.1",
     "expo": "~53.0.20",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",

frontend/package.json

@@ -1,11 +1,13 @@
 import React, { useContext } from 'react';
 import { View, StyleSheet, Alert } from 'react-native';
-import { Text, Appbar, Avatar, List, Divider, useTheme } from 'react-native-paper';
+import { Text, Appbar, Avatar, List, Divider, useTheme, Switch } 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();
@@ -56,6 +58,12 @@ 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/screens/AccountScreen.js

@@ -1,10 +1,25 @@
+import React from 'react';
 import {
-    MD3LightTheme as DefaultTheme,
-    useTheme,
+  NavigationContainer,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
+} from '@react-navigation/native';
+import {
+  MD3DarkTheme,
+  MD3LightTheme,
+  adaptNavigationTheme,
 } from 'react-native-paper';
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import merge from 'deepmerge';
+
+export const PreferencesContext = React.createContext({
+    toggleTheme: () => {},
+    isThemeDark: false,
+});
+
+const { LightTheme, DarkTheme } = adaptNavigationTheme({
+    reactNavigationLight: NavigationDefaultTheme,
+    reactNavigationDark: NavigationDarkTheme,
+});
 
-export const useAppTheme = () => {
-    const { theme } = useMaterial3Theme({ fallback: DefaultTheme });
-    return useTheme(theme);
-}
+export const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
+export const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);