better status bar color

index.html

@@ -7,7 +7,9 @@
   <link rel="icon" type="image/png" href="/favicon.png" />
   <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />
   <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#FFFFFF" />
-  <meta name="theme-color" content="#ffffff" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>gider.im</title>
   <meta name="description" content="Privacy first, local first, no tracking, no ads, no data collection.

src/components/custom/theme-toggle.tsx

@@ -3,7 +3,7 @@
 import { useLocalization } from "@/hooks/use-localization";
 import useNextValue from "@/hooks/use-next-value";
 import { useTheme } from "@/hooks/use-theme";
-import { cn, setThemeColor } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import type { Theme } from "@/providers/theme";
 import {
 	IconContrastFilled,
@@ -57,8 +57,7 @@ export function ThemeToggle({
 
 	useEffect(() => {
 		setMounted(true);
-		setThemeColor(theme);
-	}, [theme]);
+	}, []);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {

src/main.tsx

@@ -1,6 +1,6 @@
 import { Toaster } from "@/components/ui/toaster";
 import { evolu } from "@/evolu-db.ts";
-import { setThemeColor, storageKeys } from "@/lib/utils.tsx";
+import { storageKeys } from "@/lib/utils.tsx";
 
 import {
 	type AvailableLanguageTag,
@@ -26,7 +26,6 @@ const localLang =
 	(localStorage.getItem(storageKeys.lang) as AvailableLanguageTag) ||
 	sourceLanguageTag;
 setLanguageTag(localLang);
-setThemeColor(localTheme);
 
 window.oncontextmenu = () => false;