From ff07df7ae6803a2c1644496aa67c1971a5d3f650 Mon Sep 17 00:00:00 2001
From: Admin <1+admin@noreply.git.dcntrlized.org>
Date: Mon, 19 Oct 2026 09:20:42 +0100
Subject: [PATCH] [fix](client): paint the app background and default the theme
 to dark
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every screen but Login set `backgroundColor: bg` itself, so the login page and
the boot loader fell through to the platform's white surface while the text
tokens stayed light — white on light, unreadable. The palette in
`theme/tokens.ts` is fixed dark by construction, and `Uniwind.setTheme` defaulted
to light, so heroUI's own surfaces were light too. Paint the background at the
root, on the login screen and on the loader, and default the theme to dark.
---
 App.tsx                     | 3 ++-
 src/components/ui.tsx       | 3 ++-
 src/screens/LoginScreen.tsx | 4 ++--
 src/state/ThemeContext.tsx  | 8 ++++++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/App.tsx b/App.tsx
index d949d28..3c04f26 100644
--- a/App.tsx
+++ b/App.tsx
@@ -17,6 +17,7 @@ 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 { navigationRef, openLiveAlarm } from './src/navigationRef';
 import { getLaunchAlert } from './src/services/alarmNative';
 import type { RootStackParamList } from './src/navigation';
@@ -130,7 +131,7 @@ function Root() {
 
 function App() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={{ flex: 1, backgroundColor: bg }}>
       <HeroUINativeProviderRaw>
         <SafeAreaProvider>
           <ThemeProvider>
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 755dcb8..0ef5a17 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -23,6 +23,7 @@ import {
   type LucideIcon,
 } from 'lucide-react-native';
 import {
+  bg,
   border,
   danger,
   dangerDeep,
@@ -536,7 +537,7 @@ export const styles = StyleSheet.create({
     paddingVertical: 48,
   },
   emptyAction: { marginTop: space6, alignSelf: 'stretch' },
-  loading: { alignItems: 'center', justifyContent: 'center', paddingVertical: 48 },
+  loading: { alignItems: 'center', justifyContent: 'center', paddingVertical: 48, backgroundColor: bg },
   errorBanner: {
     borderWidth: 1,
     borderColor: 'rgba(248,113,113,0.3)',
diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx
index c43db83..6a5248c 100644
--- a/src/screens/LoginScreen.tsx
+++ b/src/screens/LoginScreen.tsx
@@ -12,7 +12,7 @@ import {
   Screen,
   TextInputBox,
 } from '../components/ui';
-import { space4, text, textMuted, textSecondary, typeCaption, typeLabel, typeTitle } from '../theme/tokens';
+import { space4, text, textMuted, textSecondary, typeCaption, typeLabel, typeTitle, bg } from '../theme/tokens';
 
 type Mode = 'signin' | 'register';
 
@@ -54,7 +54,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{ flex: 1, backgroundColor: bg }}>
       {!online ? <OfflineStrip /> : null}
       <KeyboardAvoidingView
         style={{ flex: 1 }}
diff --git a/src/state/ThemeContext.tsx b/src/state/ThemeContext.tsx
index 0ba7169..692964f 100644
--- a/src/state/ThemeContext.tsx
+++ b/src/state/ThemeContext.tsx
@@ -18,14 +18,18 @@ interface ThemeContextValue {
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [isDark, setIsDark] = useState(false);
+  // The app's palette is dark by construction (`theme/tokens.ts` are fixed
+  // dark values); this flag only drives heroUI's own theme so its controls
+  // match. Defaulting to light left every heroUI surface light while the
+  // app's text tokens stayed light-on-light — the white-on-white login page.
+  const [isDark, setIsDark] = useState(true);
 
   useEffect(() => {
     let cancelled = false;
     (async () => {
       try {
         const raw = await AsyncStorage.getItem(THEME_KEY);
-        const dark = raw === 'dark';
+        const dark = raw !== 'light';
         if (!cancelled) setIsDark(dark);
         Uniwind.setTheme(dark ? 'dark' : 'light');
       } catch {