diff --git a/packages/app/src/app/+html.tsx b/packages/app/src/app/+html.tsx
index bea8c752d..95a3ea3fb 100644
--- a/packages/app/src/app/+html.tsx
+++ b/packages/app/src/app/+html.tsx
@@ -7,13 +7,18 @@ import "../styles/unistyles";
 const webEcosystemStyles = /* css */ `
   html {
     touch-action: auto;
+    height: 100%;
+    background-color: #18181c;
+    color-scheme: dark;
   }
 
   body {
+    min-height: 100%;
     overflow: auto;
     overscroll-behavior: contain;
     -webkit-user-select: text;
     user-select: text;
+    background-color: #18181c;
   }
 
   body * {
@@ -36,6 +41,11 @@ const webEcosystemStyles = /* css */ `
     width: 0;
     height: 0;
   }
+
+  #root {
+    min-height: 100%;
+    background-color: #18181c;
+  }
 `;
 
 function WebRespectfulStyleReset() {
diff --git a/packages/app/src/app/_layout.tsx b/packages/app/src/app/_layout.tsx
index 8771985d3..04af26c5a 100644
--- a/packages/app/src/app/_layout.tsx
+++ b/packages/app/src/app/_layout.tsx
@@ -448,7 +448,9 @@ function MissingDaemonView() {
 
 export default function RootLayout() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView
+      style={{ flex: 1, backgroundColor: darkTheme.colors.surface0 }}
+    >
       <PerfDiagnosticsProvider scope="root_layout">
         <PortalProvider>
           <SafeAreaProvider>
@@ -467,6 +469,9 @@ export default function RootLayout() {
                                 screenOptions={{
                                   headerShown: false,
                                   animation: "none",
+                                  contentStyle: {
+                                    backgroundColor: darkTheme.colors.surface0,
+                                  },
                                 }}
                               >
                                 <Stack.Screen name="index" />