Add meta tag for theme color

showtime-xyz · Nov 23, 2023 · bb01675 · bb01675
1 parent 23a3b8e
commit bb01675
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/packages/design-system/color-scheme/provider.web.tsx b/packages/design-system/color-scheme/provider.web.tsx
@@ -40,13 +40,27 @@ export function ColorSchemeProvider({
     } else {
       document.documentElement.classList.remove("dark");
     }
+
+    const themeColor = isDark ? "#000000" : "#ffffff";
+    // Change the content attribute
+    let metaThemeColor = document.querySelector("meta[name='theme-color']");
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute("content", themeColor);
+    } else {
+      // If the meta tag does not exist, you can create it and append it to the <head>
+      metaThemeColor = document.createElement("meta");
+      metaThemeColor.setAttribute("name", "theme-color");
+      metaThemeColor.setAttribute("content", themeColor);
+      document.head.appendChild(metaThemeColor);
+    }
   }, []);
 
   useEffect(() => {
     const themeChangeListener = () => {
       const theme = Appearance.getColorScheme();
       changeTheme(theme && !getDisabledSystemTheme() ? theme : colorScheme);
     };
+
     themeChangeListener();
     const appearanceListener =
       Appearance.addChangeListener(themeChangeListener);