init

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

@@ -0,0 +1,23 @@
+import { useAuth } from "@/contexts/auth-context";
+import { useMantineTheme } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+import { useEffect } from "react";
+
+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]);
+    }
+  }, [colorScheme]);
+  return children
+}
+
+export default ColorSchemeProvider;