Sync PWA status bar theme-color with resolved app theme (#24203)

* sync PWA status bar theme-color with resolved app theme

* update tags on login page too

* track system theme preference

* revert

web/index.html

@@ -27,6 +27,7 @@
     <link rel="mask-icon" href="/images/branding/favicon.svg" color="#3b82f7" />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
     <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   </head>
   <body>
     <div id="root"></div>

web/login.html

@@ -27,6 +27,7 @@
     <link rel="mask-icon" href="/images/branding/favicon.svg" color="#3b82f7" />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
     <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   </head>
   <body>
     <div id="root"></div>

web/src/context/theme-provider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 type Theme = "dark" | "light" | "system";
+type ActiveTheme = Exclude<Theme, "system">;
 type ColorScheme =
   | "theme-blue"
   | "theme-green"
@@ -51,6 +52,32 @@ const initialState: ThemeProviderState = {
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
+function updateThemeMetaTags(theme: ActiveTheme): void {
+  const isDark = theme === "dark";
+  const metaDefinitions = [
+    { name: "theme-color", content: isDark ? "#000000" : "#ffffff" },
+    {
+      name: "apple-mobile-web-app-status-bar-style",
+      content: isDark ? "black" : "default",
+    },
+  ];
+
+  for (const { name, content } of metaDefinitions) {
+    const tags = document.head.querySelectorAll<HTMLMetaElement>(
+      `meta[name="${name}"]`,
+    );
+    const matchingTags =
+      tags.length > 0
+        ? Array.from(tags)
+        : [document.head.appendChild(document.createElement("meta"))];
+
+    for (const tag of matchingTags) {
+      tag.name = name;
+      tag.content = content;
+    }
+  }
+}
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
@@ -82,15 +109,21 @@ export function ThemeProvider({
     }
   });
 
-  const systemTheme = useMemo<Theme | undefined>(() => {
+  const [systemPrefersDark, setSystemPrefersDark] = useState(
-    if (theme != "system") {
+    () => window.matchMedia("(prefers-color-scheme: dark)").matches,
-      return undefined;
+  );
-    }
 
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
+  useEffect(() => {
-      ? "dark"
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-      : "light";
+    const handleChange = () => setSystemPrefersDark(mediaQuery.matches);
-  }, [theme]);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  const systemTheme = useMemo<ActiveTheme | undefined>(() => {
+    if (theme !== "system") return undefined;
+    return systemPrefersDark ? "dark" : "light";
+  }, [theme, systemPrefersDark]);
 
   useEffect(() => {
     //localStorage.removeItem(storageKey);
@@ -101,6 +134,8 @@ export function ThemeProvider({
 
     root.classList.add(theme, colorScheme);
 
+    updateThemeMetaTags(systemTheme ?? (theme === "system" ? "light" : theme));
+
     if (systemTheme) {
       root.classList.add(systemTheme);
       return;