diff --git a/web/src/app.html b/web/src/app.html
index c1d1520e..4ea139fc 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -17,7 +17,17 @@
 
         %sveltekit.head%
     </head>
-    <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager" style="background-color: black">
+    <style>
+        body {
+            background-color: black;
+        }
+        @media (prefers-color-scheme: light) {
+            body {
+                background-color: white;
+            }
+        }
+    </style>
+    <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
         <div style="display: contents">
             %sveltekit.body%
         </div>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 22cd0663..16422d82 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -135,6 +135,10 @@
         overscroll-behavior-y: none;
     }
 
+    :global(body) {
+        background-color: var(--secondary);
+    }
+
     #cobalt {
         position: fixed;
         height: 100%;
