1 files changed, 94 insertions, 0 deletions
diff --git a/client/src/AppThemeProvider.tsx b/client/src/AppThemeProvider.tsx
new file mode 100644
index 0000000..a88c328
--- /dev/null
+++ b/client/src/AppThemeProvider.tsx
@@ -0,0 +1,94 @@
+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 AppThemeProvider({ 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: '#FFAB91',
+            },
+          }
+        : {
+            primary: {
+              main: '#FF8A65',
+            },
+          }),
+    },
+  });
+
+  const colorTheme = createTheme(getDesignTokens(mode));
+
+  const roboto = {
+    sx: {
+      fontFamily: 'Roboto, sans-serif',
+    },
+  };
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        ...colorTheme,
+        typography: {
+          fontFamily: ['Playwrite US Trad', 'cursive'].join(','),
+          button: {
+            textTransform: 'none',
+          },
+          body1: {
+            lineHeight: 1.8,
+          },
+        },
+        components: {
+          MuiInputBase: {
+            defaultProps: roboto,
+          },
+          MuiInputLabel: {
+            defaultProps: roboto,
+          },
+          MuiAlert: {
+            defaultProps: roboto,
+          },
+          MuiFormHelperText: {
+            defaultProps: roboto,
+          },
+        },
+      }),
+    [mode]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ toggleColorMode }}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ThemeContext.Provider>
+  );
+}
+
+export default AppThemeProvider;