diff --git a/web/src/lib/state/theme.ts b/web/src/lib/state/theme.ts
index 73c53fe8..6bff35d6 100644
--- a/web/src/lib/state/theme.ts
+++ b/web/src/lib/state/theme.ts
@@ -42,6 +42,12 @@ export default derived(
 ) as Readable<Exclude<Theme, "auto">>
 
 export const statusBarColors = {
-    "dark": "#000000",
-    "light": "#ffffff"
+    mobile: {
+        dark: "#000000",
+        light: "#ffffff"
+    },
+    desktop: {
+        dark: "#131313",
+        light: "#f4f4f4"
+    }
 }
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index fb213dd9..8297773e 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -67,7 +67,15 @@
     {/if}
 
     {#if device.is.mobile}
-        <meta name="theme-color" content={statusBarColors[$currentTheme]} />
+        <meta
+            name="theme-color"
+            content={statusBarColors.mobile[$currentTheme]}
+        />
+    {:else}
+        <meta
+            name="theme-color"
+            content={statusBarColors.desktop[$currentTheme]}
+        />
     {/if}
 
     {#if plausibleLoaded || (browser && env.PLAUSIBLE_ENABLED && !$settings.privacy.disableAnalytics)}