From f383f5d94e56c7525e40067cb8b30dda1f6e917a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 29 Jun 2024 20:24:51 +0600
Subject: [PATCH] web/theme: add dynamic status bar color on mobile

---
 web/src/lib/state/theme.ts    | 12 +++++++++---
 web/src/routes/+layout.svelte | 10 +++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/state/theme.ts b/web/src/lib/state/theme.ts
index 78e1dd48..c97fd5d1 100644
--- a/web/src/lib/state/theme.ts
+++ b/web/src/lib/state/theme.ts
@@ -1,9 +1,11 @@
-import { readable, derived } from 'svelte/store';
+import { readable, derived, type Readable } from 'svelte/store';
 
 import settings from '$lib/settings';
 import { themeOptions } from '$lib/types/settings';
 
-let set: (_: typeof themeOptions[number]) => void;
+type Theme = typeof themeOptions[number];
+
+let set: (_: Theme) => void;
 
 const browserPreference = () =>
     window.matchMedia('(prefers-color-scheme: light)')
@@ -30,5 +32,9 @@ export default derived(
         return $browserPref;
     },
     browserPreference()
-);
+) as Readable<Exclude<Theme, "auto">>
 
+export const statusBarColors = {
+    "dark": "#000000",
+    "light": "#ffffff"
+}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 4d0aacd2..719fb173 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -2,11 +2,19 @@
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
 
-    import currentTheme from "$lib/state/theme";
+    import currentTheme, { statusBarColors } from "$lib/state/theme";
 
     import Sidebar from "$components/sidebar/Sidebar.svelte";
+
+    import device from "$lib/device";
 </script>
 
+<svelte:head>
+    {#if device.isMobile}
+        <meta name="theme-color" content={statusBarColors[$currentTheme]}>
+    {/if}
+</svelte:head>
+
 <div style="display: contents" data-theme={$currentTheme}>
     <div id="cobalt">
         <Sidebar />