Remove unused import, add themeSelector

src/components/Theme/ThemeContext.tsx

@@ -1,6 +1,17 @@
 import { createContext, useContext, useState, useMemo } from 'react';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { darkTheme, lightTheme } from '../../styles/theme';
+import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+});
+
+const lightTheme = createTheme({
+  palette: {
+    mode: 'light',
+  },
+});
 
 const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {} });
 

src/components/Theme/ThemeSelector.tsx

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