add light theme support

amnet-native/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {View} from "react-native";
+import {useColorScheme, View} from "react-native";
 import RealmContext from "./models/RealmContext";
 import {StatusBar} from "expo-status-bar";
 import {AMUITabBar} from "./components/AMUITabBar";
@@ -8,12 +8,12 @@ import {NavigationContainer} from "@react-navigation/native";
 import {SafeAreaProvider} from "react-native-safe-area-context";
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {createNativeStackNavigator} from "@react-navigation/native-stack";
-import {DarkTheme as NavigationDarkTheme} from '@react-navigation/native';
+import {DefaultTheme as NavigationLightTheme, DarkTheme as NavigationDarkTheme} from '@react-navigation/native';
 import {JetBrainsMono_400Regular, useFonts} from "@expo-google-fonts/jetbrains-mono";
 import {
     ActivityIndicator,
     adaptNavigationTheme,
-    MD3DarkTheme,
+    MD3DarkTheme, MD3LightTheme,
     MD3Theme,
     PaperProvider,
     Paragraph
@@ -22,24 +22,46 @@ import {
 import CardAddModal from "./app/CardAddModal";
 import CardManagerStack from "./app/CardManagerStack";
 import ServerManagerStack from "./app/ServerManagerStack";
+import {MD3Colors} from "react-native-paper/lib/typescript/types";
+
+const AMColors: Partial<MD3Colors> = {
+    primary: '#e11d48',
+    secondary: "#f97316",
+    tertiary: "#2563eb",
+}
+
+const AMUITheme: Partial<MD3Theme> = {
+    roundness: 2
+}
 
 // blend themes to be a combination of react-native-paper and shadcn/ui
 const AMDarkTheme: MD3Theme = {
     ...MD3DarkTheme,
-    roundness: 2,
+    ...AMUITheme,
     colors: {
         ...MD3DarkTheme.colors,
-        primary: '#e11d48',
-        secondary: "#f97316",
-        tertiary: "#2563eb",
+        ...AMColors,
         background: "#09090b",
         surface: "#1c1917",
     },
 };
 
-const {DarkTheme} = adaptNavigationTheme({
+const AMLightTheme: MD3Theme = {
+    ...MD3LightTheme,
+    ...AMUITheme,
+    colors: {
+        ...MD3LightTheme.colors,
+        ...AMColors,
+        background: "#f9f9f9",
+        surface: "#ffffff",
+    }
+}
+
+const {LightTheme, DarkTheme} = adaptNavigationTheme({
+    materialDark: AMDarkTheme,
+    materialLight: AMLightTheme,
     reactNavigationDark: NavigationDarkTheme,
-    materialDark: AMDarkTheme
+    reactNavigationLight: NavigationLightTheme
 });
 
 const {RealmProvider} = RealmContext;
@@ -65,6 +87,7 @@ function AppContent() {
 }
 
 export default function AppRoot() {
+    const colorScheme = useColorScheme();
     const [fontsLoaded] = useFonts({
         JetBrainsMono_400Regular
     });
@@ -77,12 +100,12 @@ export default function AppRoot() {
             </View>
         )
     }
-    
+
     return (
         <RealmProvider>
             <SafeAreaProvider>
-                <PaperProvider theme={AMDarkTheme}>
-                    <NavigationContainer theme={DarkTheme}>
+                <PaperProvider theme={colorScheme === 'dark' ? AMDarkTheme : AMLightTheme}>
+                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : LightTheme}>
                         <StatusBar/>
                         <Stack.Navigator initialRouteName="app-root">
                             {/* main app */}

amnet-native/app.json

@@ -2,6 +2,7 @@
   "name": "AimeNet",
   "slug": "amnet-native",
   "icon": "./assets/icon.png",
+  "userInterfaceStyle": "automatic",
   "ios": {
     "bundleIdentifier": "moe.ppc.amnet",
     "infoPlist": {

amnet-native/package-lock.json

@@ -22,6 +22,7 @@
         "expo-dev-client": "~4.0.10",
         "expo-linking": "~6.3.1",
         "expo-status-bar": "~1.12.1",
+        "expo-system-ui": "~3.0.7",
         "lucide-react-native": "^0.427.0",
         "react": "18.2.0",
         "react-native": "0.74.1",
@@ -7560,6 +7561,19 @@
       "integrity": "sha512-/t3xdbS8KB0prj5KG5w7z+wZPFlPtkgs95BsmrP/E7Q0xHXTcDcQ6Cu2FkFuRM+PKTb17cJDnLkawyS5vDLxMA==",
       "license": "MIT"
     },
+    "node_modules/expo-system-ui": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/expo-system-ui/-/expo-system-ui-3.0.7.tgz",
+      "integrity": "sha512-KAs72F5JKhdIfPR9ZNVlRubTPK9uUuevPy5oYEp12xNEzSQcjZKvypH5NpwJuNWkXzrp3n3vZ+3pXsudA7J3KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native/normalize-colors": "0.74.85",
+        "debug": "^4.3.2"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-updates-interface": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-0.16.2.tgz",

amnet-native/package.json

@@ -35,6 +35,7 @@
     "react-native-svg": "^15.5.0",
     "react-native-url-polyfill": "^2.0.0",
     "realm": "^12.12.1",
-    "typescript": "~5.3.3"
+    "typescript": "~5.3.3",
+    "expo-system-ui": "~3.0.7"
   }
 }