1 files changed, 57 insertions, 0 deletions
diff --git a/client/src/ThemeContextProvider.tsx b/client/src/ThemeContextProvider.tsx
new file mode 100644
index 0000000..6ae1430
--- /dev/null
+++ b/client/src/ThemeContextProvider.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { ReactNode, createContext, useMemo, useState } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import type { PaletteMode } from '@mui/material';
+
+type ThemeContextType = {
+  toggleColorMode: () => void;
+};
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  toggleColorMode: () => {},
+});
+
+function ThemeContextProvider({ children }: ThemeProviderProps) {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mode, setMode] = useState<'light' | 'dark'>(
+    prefersDarkMode ? 'dark' : 'light'
+  );
+
+  const toggleColorMode = () => {
+    setMode((prevMode: PaletteMode) =>
+      prevMode === 'light' ? 'dark' : 'light'
+    );
+  };
+
+  const getDesignTokens = (mode: PaletteMode) => ({
+    palette: {
+      mode,
+      ...(mode === 'light'
+        ? {
+            primary: {
+              main: '#007bff',
+            },
+          }
+        : {
+            primary: {
+              main: '#78bef8',
+            },
+          }),
+    },
+  });
+
+  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
+
+  return (
+    <ThemeContext.Provider value={{ toggleColorMode }}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export default ThemeContextProvider;