Add themeSelector component

src/components/Theme/ThemeContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState, useMemo } from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { darkTheme, lightTheme } from '../../styles/theme';
+
+const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {} });
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [themeMode, setThemeMode] = useState('light');
+
+  const theme = useMemo(() => (themeMode === 'light' ? lightTheme : darkTheme), [themeMode]);
+
+  const toggleTheme = () => {
+    setThemeMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ themeMode, toggleTheme }}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => useContext(ThemeContext);

src/components/Theme/ThemeSelector.tsx

@@ -0,0 +1,18 @@
+import { useThemeContext } from "./ThemeContext";
+import { Switch } from "@mui/material";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
+
+const ThemeSelector = ({ style }) => {
+  const { themeMode, toggleTheme } = useThemeContext();
+
+  return (
+    <div
+      style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1px", ...style }}
+    >
+      {themeMode === "dark" ? <Brightness7 /> : <Brightness4 />}
+      <Switch checked={themeMode === "dark"} onChange={toggleTheme} />
+    </div>
+  );
+};
+
+export default ThemeSelector;