1 files changed, 44 insertions, 0 deletions
diff --git a/src/ThemeContextProvider.tsx b/src/ThemeContextProvider.tsx
new file mode 100644
index 0000000..970f9d8
--- /dev/null
+++ b/src/ThemeContextProvider.tsx
@@ -0,0 +1,44 @@
+import { ReactNode, createContext, useMemo, useState } from 'react';
+import { StyledEngineProvider, ThemeProvider, createTheme } from '@mui/material/styles';
+
+type ThemeContextType = {
+  switchColorMode: () => void;
+};
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  switchColorMode: () => {}
+});
+
+function ThemeContextProvider({ children }: ThemeProviderProps) {
+  const [mode, setMode] = useState<'light' | 'dark'>('light');
+
+  const switchColorMode = () => {
+    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        }
+      }),
+    [mode]
+  );
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeContext.Provider value={{ switchColorMode }}>
+        <ThemeProvider theme={theme}>
+          {children}
+        </ThemeProvider>
+      </ThemeContext.Provider>
+    </StyledEngineProvider>
+  );
+}
+
+export default ThemeContextProvider;