🚀 release v3.0.0

client/wrappers/ThemeWrapper.tsx

@@ -0,0 +1,34 @@
+import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { useEffect, useMemo } from 'react';
+
+import { darkTheme, lightTheme } from '@/config/theme';
+import { setTheme, Theme } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+
+const ThemeWrapper: React.FC = ({ children }) => {
+  const dispatch = useAppDispatch();
+
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme: Theme | undefined = useAppSelector((state) => state.build.theme);
+  const isDarkMode = useMemo(() => theme === 'dark', [theme]);
+
+  const muiTheme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
+
+  useEffect(() => {
+    if (theme === undefined) {
+      dispatch(setTheme({ theme: prefersDarkMode ? 'dark' : 'light' }));
+    }
+  }, [theme, dispatch, prefersDarkMode]);
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
+  return <ThemeProvider theme={muiTheme}>{children}</ThemeProvider>;
+};
+
+export default ThemeWrapper;