feat(web): set Safari window colors (#1543)

* feat(web): update meta-theme color

- used by Safari for its colored compact tab bar

* fix: hardcode the colors

web/index.html

@@ -9,7 +9,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#141415" />
+    <meta name="theme-color" content="#18181B">
     <meta name="description" content="autobrr" />
     <link rel="preload" href="/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin="use-credentials">
     <link rel="apple-touch-icon" href="/logo192.png" />

web/src/utils/Context.ts

@@ -115,10 +115,27 @@ export const SettingsContext = newRidgeState<SettingsType>(
     onSet: (newState, prevState) => {
       document.documentElement.classList.toggle("dark", newState.darkTheme);
       DefaultSetter(SettingsKey, newState, prevState);
+      updateMetaThemeColor(newState.darkTheme);
     }
   }
 );
 
+/**
+ * Updates the meta theme color based on the current theme state.
+ * Used by Safari to color the compact tab bar on both iOS and MacOS.
+ */
+const updateMetaThemeColor = (darkTheme: boolean) => {
+  const color = darkTheme ? '#121315' : '#f4f4f5';
+  let metaThemeColor: HTMLMetaElement | null = document.querySelector('meta[name="theme-color"]');
+  if (!metaThemeColor) {
+    metaThemeColor = document.createElement('meta') as HTMLMetaElement;
+    metaThemeColor.name = "theme-color";
+    document.head.appendChild(metaThemeColor);
+  }
+
+  metaThemeColor.content = color;
+};
+
 export const FilterListContext = newRidgeState<FilterListState>(
   FilterListContextDefaults,
   {