Add system-driven dark mode (#36)

The app honored the OS color scheme only for the status bar; every surface
was hardcoded to a light palette, which looked broken under a dark system
theme. Introduce a small theme layer (light/dark semantic tokens + a
useTheme hook over useColorScheme) and route every screen's colors through
it, so appearance follows the system setting with no in-app toggle.

The map is the centerpiece: it now swaps the MapLibre style URL to
OpenFreeMap's dark basemap and recolors pins/controls for contrast against it.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: dfalling

App.tsx

@@ -5,36 +5,38 @@
  */
 
 import {ApolloProvider} from '@apollo/client';
-import {NavigationContainer} from '@react-navigation/native';
-import {useEffect} from 'react';
 import {
-  ActivityIndicator,
-  StatusBar,
-  StyleSheet,
-  useColorScheme,
-  View,
-} from 'react-native';
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+} from '@react-navigation/native';
+import {useEffect} from 'react';
+import {ActivityIndicator, StatusBar, StyleSheet, View} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {apolloClient} from './src/auth/authClient';
 import {useDeepLinkListener} from './src/auth/deepLinks';
 import {LoginScreen} from './src/auth/LoginScreen';
 import {tokenStore, useAuth, useAuthHydrated} from './src/auth/tokenStore';
 import {RootNavigator} from './src/navigation/RootNavigator';
+import {useTheme} from './src/theme/useTheme';
 
 function App() {
-  const isDarkMode = useColorScheme() === 'dark';
+  const theme = useTheme();
 
   return (
     <ApolloProvider client={apolloClient}>
       <SafeAreaProvider>
-        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+        <StatusBar
+          barStyle={theme.scheme === 'dark' ? 'light-content' : 'dark-content'}
+        />
         <AppContent />
       </SafeAreaProvider>
     </ApolloProvider>
   );
 }
 
 function AppContent() {
+  const theme = useTheme();
   const hydrated = useAuthHydrated();
   const auth = useAuth();
 
@@ -46,7 +48,12 @@ function AppContent() {
 
   if (!hydrated) {
     return (
-      <View style={[styles.container, styles.splash]}>
+      <View
+        style={[
+          styles.container,
+          styles.splash,
+          {backgroundColor: theme.background},
+        ]}>
         <ActivityIndicator />
       </View>
     );
@@ -56,8 +63,12 @@ function AppContent() {
     return <LoginScreen />;
   }
 
+  // Match React Navigation's container background to the active scheme so the
+  // gap shown during the slide transition between screens isn't a white flash
+  // in dark mode.
   return (
-    <NavigationContainer>
+    <NavigationContainer
+      theme={theme.scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <RootNavigator />
     </NavigationContainer>
   );

src/account/AccountMenu.tsx

@@ -1,15 +1,19 @@
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {Pressable, StyleSheet, Text} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {logout} from '../auth/authClient';
 import {useAuth} from '../auth/tokenStore';
+import type {Theme} from '../theme/colors';
+import {useTheme} from '../theme/useTheme';
 import {Sheet} from '../ui/Sheet';
 
 /**
  * Account avatar + sheet, pinned top-right. Lives inside the map screen (rather
  * than as a root-level sibling) so pushed detail screens cover it.
  */
 export function AccountMenu() {
+  const theme = useTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const safeAreaInsets = useSafeAreaInsets();
   const [open, setOpen] = useState(false);
   const auth = useAuth();
@@ -57,44 +61,45 @@ export function AccountMenu() {
   );
 }
 
-const styles = StyleSheet.create({
-  avatarButton: {
-    position: 'absolute',
-    right: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#1d6fe0',
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: '#000',
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    shadowOffset: {width: 0, height: 2},
-    elevation: 4,
-  },
-  avatarPressed: {opacity: 0.8},
-  avatarText: {
-    color: '#ffffff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  sheetEmail: {
-    fontSize: 12,
-    color: '#666',
-    paddingHorizontal: 12,
-    paddingBottom: 8,
-  },
-  sheetItem: {
-    paddingHorizontal: 12,
-    paddingVertical: 14,
-    borderRadius: 8,
-  },
-  sheetItemPressed: {
-    backgroundColor: '#f2f2f2',
-  },
-  sheetItemText: {
-    fontSize: 16,
-    color: '#222',
-  },
-});
+const makeStyles = (theme: Theme) =>
+  StyleSheet.create({
+    avatarButton: {
+      position: 'absolute',
+      right: 16,
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: theme.accent,
+      alignItems: 'center',
+      justifyContent: 'center',
+      shadowColor: '#000',
+      shadowOpacity: 0.2,
+      shadowRadius: 4,
+      shadowOffset: {width: 0, height: 2},
+      elevation: 4,
+    },
+    avatarPressed: {opacity: 0.8},
+    avatarText: {
+      color: '#ffffff',
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    sheetEmail: {
+      fontSize: 12,
+      color: theme.textSecondary,
+      paddingHorizontal: 12,
+      paddingBottom: 8,
+    },
+    sheetItem: {
+      paddingHorizontal: 12,
+      paddingVertical: 14,
+      borderRadius: 8,
+    },
+    sheetItemPressed: {
+      backgroundColor: theme.surfaceMuted,
+    },
+    sheetItemText: {
+      fontSize: 16,
+      color: theme.textPrimary,
+    },
+  });

src/auth/LoginScreen.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {
   ActivityIndicator,
   KeyboardAvoidingView,
@@ -10,6 +10,8 @@ import {
   View,
 } from 'react-native';
 import {useLoginMutation} from '../graphql/__generated__/types';
+import type {Theme} from '../theme/colors';
+import {useTheme} from '../theme/useTheme';
 import {clearSecurityWarning, useSecurityWarning} from './authClient';
 import {tokenStore} from './tokenStore';
 
@@ -43,6 +45,8 @@ function messageForCode(code: string | undefined): string {
 }
 
 export function LoginScreen() {
+  const theme = useTheme();
+  const styles = useMemo(() => makeStyles(theme), [theme]);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -83,6 +87,7 @@ export function LoginScreen() {
         <TextInput
           style={styles.input}
           placeholder="Email"
+          placeholderTextColor={theme.textTertiary}
           autoCapitalize="none"
           autoCorrect={false}
           autoComplete="email"
@@ -94,6 +99,7 @@ export function LoginScreen() {
         <TextInput
           style={styles.input}
           placeholder="Password"
+          placeholderTextColor={theme.textTertiary}
           autoCapitalize="none"
           autoCorrect={false}
           autoComplete="password"
@@ -119,7 +125,7 @@ export function LoginScreen() {
             pressed && canSubmit && styles.buttonPressed,
           ]}>
           {loading ? (
-            <ActivityIndicator color="#fff" />
+            <ActivityIndicator color={theme.onAction} />
           ) : (
             <Text style={styles.buttonText}>Log in</Text>
           )}
@@ -129,51 +135,54 @@ export function LoginScreen() {
   );
 }
 
-const styles = StyleSheet.create({
-  flex: {flex: 1},
-  container: {
-    flex: 1,
-    padding: 24,
-    justifyContent: 'center',
-    gap: 12,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    marginBottom: 16,
-    textAlign: 'center',
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-    fontSize: 16,
-  },
-  error: {
-    color: '#c00',
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  warning: {
-    color: '#a55',
-    fontSize: 13,
-    textAlign: 'center',
-    fontStyle: 'italic',
-  },
-  button: {
-    backgroundColor: '#0a7ea4',
-    borderRadius: 8,
-    paddingVertical: 14,
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  buttonDisabled: {opacity: 0.5},
-  buttonPressed: {opacity: 0.85},
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-});
+const makeStyles = (theme: Theme) =>
+  StyleSheet.create({
+    flex: {flex: 1, backgroundColor: theme.background},
+    container: {
+      flex: 1,
+      padding: 24,
+      justifyContent: 'center',
+      gap: 12,
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: '600',
+      marginBottom: 16,
+      textAlign: 'center',
+      color: theme.textPrimary,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: theme.border,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      fontSize: 16,
+      color: theme.textPrimary,
+    },
+    error: {
+      color: theme.error,
+      fontSize: 14,
+      textAlign: 'center',
+    },
+    warning: {
+      color: theme.error,
+      fontSize: 13,
+      textAlign: 'center',
+      fontStyle: 'italic',
+    },
+    button: {
+      backgroundColor: theme.action,
+      borderRadius: 8,
+      paddingVertical: 14,
+      alignItems: 'center',
+      marginTop: 8,
+    },
+    buttonDisabled: {opacity: 0.5},
+    buttonPressed: {opacity: 0.85},
+    buttonText: {
+      color: theme.onAction,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+  });