themes lol

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

@@ -1,18 +1,40 @@
 import { useAuth } from "@/contexts/auth-context";
 import { useMantineColorScheme } from "@mantine/core";
-import { useEffect } from "react";
-import { CHROME_COLORS, setThemeColorMeta } from "./theme-colors";
+import { useEffect, useRef } from "react";
+import { getTheme } from "@/themes/registry";
+import { resolveChromeColors } from "@/themes/chrome";
+import { setBaseThemeColor } from "./theme-colors";
 
 const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
   const {
-    metadata: { colorScheme },
+    metadata: { colorScheme, theme },
   } = useAuth();
-  const { setColorScheme } = useMantineColorScheme();
+  const { colorScheme: currentScheme, setColorScheme } =
+    useMantineColorScheme();
+
+  // Mantine recreates setColorScheme every render; calling it redundantly
+  // triggers its global transition-suppression flash, so ref it and only
+  // call on an actual value change.
+  const setColorSchemeRef = useRef(setColorScheme);
+  setColorSchemeRef.current = setColorScheme;
+
+  const manifest = getTheme(theme);
+  const forcedScheme =
+    manifest.colorSchemes === "both" ? undefined : manifest.colorSchemes;
 
   useEffect(() => {
+    const chrome = resolveChromeColors(manifest);
+
+    if (forcedScheme) {
+      setBaseThemeColor(chrome[forcedScheme].base);
+      return;
+    }
+
     if (!colorScheme) return;
 
-    setColorScheme(colorScheme);
+    if (colorScheme !== currentScheme) {
+      setColorSchemeRef.current(colorScheme);
+    }
 
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const applyThemeColor = () => {
@@ -22,7 +44,7 @@ const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
             ? "dark"
             : "light"
           : colorScheme;
-      setThemeColorMeta(CHROME_COLORS[resolved].base);
+      setBaseThemeColor(chrome[resolved].base);
     };
 
     applyThemeColor();
@@ -31,7 +53,7 @@ const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
       media.addEventListener("change", applyThemeColor);
       return () => media.removeEventListener("change", applyThemeColor);
     }
-  }, [colorScheme, setColorScheme]);
+  }, [colorScheme, currentScheme, manifest, forcedScheme]);
 
   return children;
 };