Fix dark mode: use explicit dark/light hex colors for formSheet and modal nav bars

Author: cheeaun

app/_layout.jsx

@@ -167,7 +167,10 @@ export default function RootLayout() {
               options={{
                 presentation: 'formSheet',
                 sheetAllowedDetents: 'fitToContents',
-                headerTransparent: false,
+                headerStyle: {
+                  backgroundColor: isDark ? '#1C1C1E' : '#F2F2F7',
+                },
+                headerTintColor: isDark ? '#FFF' : '#007AFF',
               }}
             />
             <Stack.Screen
@@ -191,7 +194,11 @@ export default function RootLayout() {
               name="web-view"
               options={{
                 presentation: 'modal',
-                headerTransparent: false,
+                headerStyle: {
+                  backgroundColor: isDark ? '#1C1C1E' : '#F2F2F7',
+                },
+                headerTintColor: isDark ? '#FFF' : '#007AFF',
+                headerTitleStyle: { color: isDark ? '#FFF' : '#000' },
               }}
             />
             <Stack.Screen

app/user/[id].jsx

@@ -3,10 +3,12 @@ import { View } from 'react-native';
 import { Stack, router, useLocalSearchParams } from 'expo-router';
 
 import Text from '../../components/Text';
+import useTheme from '../../hooks/useTheme';
 import UserScreen from '../../screens/UserScreen';
 
 export default function User() {
   const { id } = useLocalSearchParams();
+  const { isDark } = useTheme();
 
   return (
     <>
@@ -18,7 +20,11 @@ export default function User() {
               style={{ flex: 1, alignItems: 'flex-start', marginRight: 60 }}
             >
               <Text
-                style={{ fontSize: 17, fontWeight: '600' }}
+                style={{
+                  fontSize: 17,
+                  fontWeight: '600',
+                  color: isDark ? '#FFF' : '#000',
+                }}
                 numberOfLines={1}
               >
                 {id}