theme fixes

src/Header.tsx

@@ -16,8 +16,11 @@ import {
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import LogoutIcon from "@mui/icons-material/Logout";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../react-auth";
+import { ColorModeContext } from "./AppTheme";
 
 interface HeaderProps {
   routerMapping: {
@@ -39,6 +42,7 @@ export default function Header({
 
   const navigate = useNavigate();
   const { currentUser, logout } = useAuth();
+  const { mode, toggleColorMode } = React.useContext(ColorModeContext);
 
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -70,6 +74,11 @@ export default function Header({
           </IconButton>
         )}
 
+        {/* THEME TOGGLE */}
+        <IconButton onClick={toggleColorMode} color="inherit" sx={{ mr: 2 }}>
+          {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+        </IconButton>
+
         {/* TITLE */}
         <Typography
           variant="h6"