feat(theme): sync body background-color with theme-color meta tag (#9325

) Ensures that the status bar color on some mobile browsers adapts to the theme. Co-authored-by: Claas Augner <[email protected]>
mdn · Oct 30, 2023 · 5001b04 · 5001b04
1 parent 1f11e2c
commit 5001b04
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/client/src/ui-context.tsx b/client/src/ui-context.tsx
@@ -74,9 +74,6 @@ export function UIProvider(props: any) {
     }
     dark.addEventListener("change", setDark);
     const light = window.matchMedia("(prefers-color-scheme: light)");
-    if (dark.matches) {
-      setColorScheme("dark");
-    }
     light.addEventListener("change", setLight);
     return () => {
       light.removeEventListener("change", setLight);

diff --git a/client/src/ui/molecules/theme-switcher/index.tsx b/client/src/ui/molecules/theme-switcher/index.tsx
@@ -58,10 +58,8 @@ export const ThemeSwitcher = () => {
       console.warn("Unable to read theme from localStorage", e);
     }
 
-    if (theme) {
-      switchTheme(theme, setActiveTheme);
-    }
-  }, [activeTheme]);
+    switchTheme(theme ?? "os-default", setActiveTheme);
+  }, []);
 
   return (
     <DropdownMenuWrapper

diff --git a/client/src/utils.ts b/client/src/utils.ts
@@ -58,6 +58,17 @@ export function switchTheme(theme: Theme, set: (theme: Theme) => void) {
   if (window && html) {
     html.className = theme;
     html.style.backgroundColor = "";
+
+    setTimeout(() => {
+      const meta = document.querySelector<HTMLMetaElement>(
+        'meta[name="theme-color"]'
+      );
+      const color = getComputedStyle(document.body).backgroundColor;
+      if (meta && color) {
+        meta.content = color;
+      }
+    }, 1);
+
     try {
       window.localStorage.setItem("theme", theme);
     } catch (err) {