dark theme added

src/components/molecules/NavBar.tsx

@@ -3,14 +3,15 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material";
-import { AccountCircle, Logout, Clear } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Typography, Avatar, Tooltip } from "@mui/material";
+import { AccountCircle, Logout, Clear, Brightness4, Brightness7 } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
 import DiscordIcon from '../atoms/DiscordIcon';
 import { apiUrl } from '../../apiConfig';
 import MaxunLogo from "../../assets/maxunlogo.png";
+import { useThemeMode } from '../../context/theme-provider';
 
 interface NavBarProps {
   recordingName: string;
@@ -18,10 +19,11 @@ interface NavBarProps {
 }
 
 export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
-  const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
+  const { notify, browserId, setBrowserId } = useGlobalInfoStore();
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
   const navigate = useNavigate();
+  const { darkMode, toggleTheme } = useThemeMode();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -51,20 +53,18 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
   };
 
   return (
-    <NavBarWrapper>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'flex-start',
-      }}>
+    <NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
+      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
         <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
-        <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
+        <div style={{ padding: '11px' }}>
+          <ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
+        </div>
       </div>
-      {
-        user ? (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
-            {!isRecording ? (
-              <>
-                <IconButton
+      {user ? (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+          {!isRecording ? (
+            <>
+              <IconButton
                 component="a"
                 href="https://discord.gg/NFhWDCdb"
                 target="_blank"
@@ -76,72 +76,71 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
                   padding: '8px',
                   marginRight: '10px',
                 }}
-                >
+              >
                 <DiscordIcon sx={{ marginRight: '5px' }} />
-                </IconButton>
+              </IconButton>
               <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-                <IconButton onClick={handleMenuOpen} sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  borderRadius: '5px',
-                  padding: '8px',
-                  marginRight: '10px',
-                  '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
-                }}>
-                  <AccountCircle sx={{ marginRight: '5px' }} />
-                  <Typography variant="body1">{user.email}</Typography>
+              <IconButton onClick={handleMenuOpen} sx={{
+                display: 'flex',
+                alignItems: 'center',
+                borderRadius: '5px',
+                padding: '8px',
+                marginRight: '10px',
+                '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
+              }}>
+                <AccountCircle sx={{ marginRight: '5px' }} />
+                <Typography variant="body1">{user.email}</Typography>
+              </IconButton>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+              >
+                <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
+                  <Logout sx={{ marginRight: '5px' }} /> Logout
+                </MenuItem>
+              </Menu>
+              {/* Theme Toggle Button */}
+              <Tooltip title="Toggle light/dark theme">
+                <IconButton onClick={toggleTheme} color="inherit">
+                  {darkMode ? <Brightness7 /> : <Brightness4 />}
                 </IconButton>
-                <Menu
-                  anchorEl={anchorEl}
-                  open={Boolean(anchorEl)}
-                  onClose={handleMenuClose}
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                  }}
-                  transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'right',
-                  }}
-                >
-                  <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
-                    <Logout sx={{ marginRight: '5px' }} /> Logout
-                  </MenuItem>
-                </Menu>
-              </>
-            ) : (
-              <>
-                <IconButton onClick={goToMainMenu} sx={{
-                  borderRadius: '5px',
-                  padding: '8px',
-                  background: 'red',
-                  color: 'white',
-                  marginRight: '10px',
-                  '&:hover': { color: 'white', backgroundColor: 'red' }
-                }}>
-                  <Clear sx={{ marginRight: '5px' }} />
-                  Discard
-                </IconButton>
-                <SaveRecording fileName={recordingName} />
-              </>
-            )}
-          </div>
-        ) : ""
-      }
+              </Tooltip>
+            </>
+          ) : (
+            <>
+              <IconButton onClick={goToMainMenu} sx={{
+                borderRadius: '5px',
+                padding: '8px',
+                background: 'red',
+                color: 'white',
+                marginRight: '10px',
+                '&:hover': { color: 'white', backgroundColor: 'red' }
+              }}>
+                <Clear sx={{ marginRight: '5px' }} />
+                Discard
+              </IconButton>
+              <SaveRecording fileName={recordingName} />
+            </>
+          )}
+        </div>
+      ) : null}
     </NavBarWrapper>
   );
 };
 
-const NavBarWrapper = styled.div`
+const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
   grid-area: navbar;
-  background-color: white;
-  padding:5px;
+  background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
+  padding: 5px;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
 `;
 
-const ProjectName = styled.b`
-  color: #3f4853;
+const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`
+  color: ${({ mode }) => (mode === 'dark' ? 'white' : 'black')};
   font-size: 1.3em;
 `;