From 78f23da0a540fade41c2f1e131702abdbb9086c0 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 28 Apr 2025 21:41:52 +0600
Subject: [PATCH] web/layout: adaptive status bar colors for desktop

mostly used by safari
---
 web/src/lib/state/theme.ts    | 10 ++++++++--
 web/src/routes/+layout.svelte | 10 +++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

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)}