style upgrades

src/lib/mantine/color-scheme-provider.tsx

@@ -1,27 +1,38 @@
 import { useAuth } from "@/contexts/auth-context";
-import { useMantineTheme } from "@mantine/core";
 import { useMantineColorScheme } from "@mantine/core";
 import { useEffect } from "react";
+import { CHROME_COLORS, setThemeColorMeta } from "./theme-colors";
 
 const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
   const {
     metadata: { colorScheme },
   } = useAuth();
   const { setColorScheme } = useMantineColorScheme();
-  const theme = useMantineTheme();
 
   useEffect(() => {
     if (!colorScheme) return;
 
     setColorScheme(colorScheme);
-    const themeColorMeta = document.querySelector('meta[name="theme-color"]');
-    if (themeColorMeta) {
-      themeColorMeta.setAttribute(
-        "content",
-        colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
-      );
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const applyThemeColor = () => {
+      const resolved =
+        colorScheme === "auto"
+          ? media.matches
+            ? "dark"
+            : "light"
+          : colorScheme;
+      setThemeColorMeta(CHROME_COLORS[resolved].base);
+    };
+
+    applyThemeColor();
+
+    if (colorScheme === "auto") {
+      media.addEventListener("change", applyThemeColor);
+      return () => media.removeEventListener("change", applyThemeColor);
     }
-  }, [colorScheme]);
+  }, [colorScheme, setColorScheme]);
+
   return children;
 };