From 6cd6bf3ed3736f9686c9e5d7dda4bc07e60ca948 Mon Sep 17 00:00:00 2001
From: Admin <1+admin@noreply.git.dcntrlized.org>
Date: Mon, 19 Oct 2026 09:28:20 +0100
Subject: [PATCH] [fix](client): give the navigator a dark theme and a light
 status bar

React Navigation paints every scene with its own theme background and defaults
to the light one, so a screen that did not paint `bg` itself sat on white while
the text tokens stayed light. Root-level background + a matching navigator theme
means no screen can fall through to a light surface again, and the status bar
icons are legible on the dark palette.
---
 App.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/App.tsx b/App.tsx
index 3c04f26..e18ef2f 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from 'react';
+import { StatusBar } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { HeroUINativeProviderRaw } from 'heroui-native/provider-raw';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { DarkTheme, NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ThemeProvider } from './src/state/ThemeContext';
@@ -17,13 +18,32 @@ import ScannerScreen from './src/screens/ScannerScreen';
 import SettingsScreen from './src/screens/SettingsScreen';
 import LiveAlarmScreen from './src/screens/LiveAlarmScreen';
 import { LoadingView } from './src/components/ui';
-import { bg } from './src/theme/tokens';
+import { bg, border, focusRing, text } from './src/theme/tokens';
 import { navigationRef, openLiveAlarm } from './src/navigationRef';
 import { getLaunchAlert } from './src/services/alarmNative';
 import type { RootStackParamList } from './src/navigation';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
+/**
+ * React Navigation paints each scene with its own theme background, and the
+ * default theme is light — that white surface is what showed through every
+ * screen that did not paint `bg` itself (the login page, the boot loader),
+ * producing light text on white. The app palette is dark by construction, so
+ * the navigator theme has to say so too.
+ */
+const NAV_THEME = {
+  ...DarkTheme,
+  colors: {
+    ...DarkTheme.colors,
+    background: bg,
+    card: bg,
+    text,
+    border,
+    primary: focusRing,
+  },
+};
+
 function Navigator({ initialRoute }: { initialRoute: 'Home' | 'Login' }) {
   return (
     <Stack.Navigator initialRouteName={initialRoute} screenOptions={{ headerShown: false }}>
@@ -132,12 +152,13 @@ function Root() {
 function App() {
   return (
     <GestureHandlerRootView style={{ flex: 1, backgroundColor: bg }}>
+      <StatusBar barStyle="light-content" backgroundColor={bg} />
       <HeroUINativeProviderRaw>
         <SafeAreaProvider>
           <ThemeProvider>
             <ConnectionProvider>
               <AuthProvider>
-                <NavigationContainer ref={navigationRef}>
+                <NavigationContainer ref={navigationRef} theme={NAV_THEME}>
                   <Root />
                 </NavigationContainer>
               </AuthProvider>