fix: Correctly implement Material You dynamic theming and fix credit color

This commit fixes the implementation of Material 3 dynamic theming by re-introducing the `@pchmn/expo-material3-theme` dependency and using it to get the system's color palette. It also fixes the credit text color to be green as you requested.

Key changes:
- Re-installed the `@pchmn/expo-material3-theme` dependency.
- Updated `styles/theme.js` to use the `useMaterial3Theme` hook from `@pchmn/expo-material3-theme`.
- Fixed the credit text color in `HomeScreen.js`, `GroupDetailsScreen.js`, and `FriendsScreen.js` to be green.

Author: google-labs-jules[bot]

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "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",

frontend/screens/FriendsScreen.js

@@ -48,7 +48,7 @@ const FriendsScreen = () => {
     }, [token, isFocused]);
 
     const renderFriend = ({ item }) => {
-        const balanceColor = item.netBalance < 0 ? theme.colors.error : theme.colors.primary;
+        const balanceColor = item.netBalance < 0 ? theme.colors.error : '#4CAF50';
         const balanceText = item.netBalance < 0
             ? `You owe $${Math.abs(item.netBalance).toFixed(2)}`
             : `Owes you $${item.netBalance.toFixed(2)}`;

frontend/screens/GroupDetailsScreen.js

@@ -62,7 +62,7 @@ const GroupDetailsScreen = ({ route, navigation }) => {
 
     if (net > 0) {
       balanceText = `You are owed ${formatCurrency(net)}`;
-      balanceColor = theme.colors.primary;
+      balanceColor = '#4CAF50';
     } else if (net < 0) {
       balanceText = `You borrowed ${formatCurrency(Math.abs(net))}`;
       balanceColor = theme.colors.error;

frontend/screens/HomeScreen.js

@@ -128,16 +128,16 @@ const HomeScreen = ({ navigation }) => {
     // Get text color based on settlement status
     const getStatusColor = () => {
       if (!settlementStatus || settlementStatus.isSettled) {
-        return theme.colors.primary;
+        return '#4CAF50';
       }
 
       if (settlementStatus.netBalance > 0) {
-        return theme.colors.primary;
+        return '#4CAF50';
       } else if (settlementStatus.netBalance < 0) {
         return theme.colors.error;
       }
 
-      return theme.colors.primary;
+      return '#4CAF50';
     };
 
     return (

frontend/styles/theme.js

@@ -1,25 +1,25 @@
-import React from 'react';
-import {
-  NavigationContainer,
-  DarkTheme as NavigationDarkTheme,
-  DefaultTheme as NavigationDefaultTheme,
-} from '@react-navigation/native';
+import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import { useMemo } from 'react';
+import { useColorScheme } from 'react-native';
 import {
   MD3DarkTheme,
   MD3LightTheme,
-  adaptNavigationTheme,
 } from 'react-native-paper';
-import merge from 'deepmerge';
 
-export const PreferencesContext = React.createContext({
-    toggleTheme: () => {},
-    isThemeDark: false,
-});
+export const useAppTheme = () => {
+    const colorScheme = useColorScheme();
+    const { theme } = useMaterial3Theme();
 
-const { LightTheme, DarkTheme } = adaptNavigationTheme({
-    reactNavigationLight: NavigationDefaultTheme,
-    reactNavigationDark: NavigationDarkTheme,
-});
+    const paperTheme = useMemo(() => {
+      const baseTheme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme;
+      return {
+        ...baseTheme,
+        colors: {
+          ...baseTheme.colors,
+          ...theme.light,
+        },
+      };
+    }, [colorScheme, theme]);
 
-export const CombinedDefaultTheme = merge(MD3LightTheme, LightTheme);
-export const CombinedDarkTheme = merge(MD3DarkTheme, DarkTheme);
+    return paperTheme;
+  };