update

src/ThemeProvider.tsx

@@ -0,0 +1,34 @@
+import { ColorSchemeProvider, MantineProvider } from "@mantine/core";
+import { useEffect } from "react";
+
+import { usePreferenceState } from "./store/module/preference";
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const {
+    state: { colorScheme },
+    toggleColorScheme,
+  } = usePreferenceState();
+
+  useEffect(() => {
+    console.log(colorScheme);
+  }, []);
+
+  return (
+    <ColorSchemeProvider
+      colorScheme={colorScheme}
+      toggleColorScheme={toggleColorScheme}
+    >
+      <MantineProvider
+        theme={{ colorScheme }}
+        withGlobalStyles
+        withNormalizeCSS
+      >
+        {children}
+      </MantineProvider>
+    </ColorSchemeProvider>
+  );
+}