implemented light and dark mode

package.json

@@ -7,7 +7,7 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.0.14",
     "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.6",
+    "@mui/material": "^5.16.7",
     "@react-spring/web": "^9.7.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/App.js

@@ -1,12 +1,14 @@
 import logo from './logo.svg';
 import Navbar from './Components/navbar.js';
+import { ThemeContextProvider } from './themeContextProvider';
+import { darkTheme, lightTheme } from './theme'; // Import your custom theme
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
+    <ThemeContextProvider theme={lightTheme}>
       <Navbar />
-    </div>
+    </ThemeContextProvider>
   );
 }
 

src/Components/navbar.js

@@ -1,33 +1,61 @@
 import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import InputGroup from 'react-bootstrap/InputGroup';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
+import Box from '@mui/material/Box';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import { Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import IconButton from '@mui/material/IconButton';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import AssignmentIndTwoToneIcon from '@mui/icons-material/AssignmentIndTwoTone';
+import { useTheme, useMediaQuery } from '@mui/material';
+import { useThemeContext } from '../themeContextProvider';
+
+function ThemeToggleButton() {
+    const { mode, toggleTheme } = useThemeContext();
+    const theme = useTheme();
+
+    return (
+        <IconButton onClick={toggleTheme} sx={{color: theme.palette.accent.main}}>
+            {mode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
+        </IconButton>
+    );
+};
 
 export default function NavbarComponent() {
+    const theme = useTheme();
+
+    const navbarBgColor = theme.palette.primary.main;
+
     return (
-        <>
-        <Navbar bg="dark" variant="dark" style={{ zIndex: 1000 }}>
-            <Container direction="horizontal">
-                <Navbar.Brand href='#home' className="mx-2"> {/* logo goes here */}</Navbar.Brand>
-                <Form className="d-flex mx-2">
-                    <InputGroup>
-                        <Form.Control
-                            placeholder="search"
-                            aria-label='search'
-                            aria-describedby='search' />
-                    </InputGroup>
-                </Form>
-                <Nav className="d-flex align-items-center">
-                    <Nav.Link href="#tasks" className="mx-2">Tasks</Nav.Link>
-                    <Nav.Link href="#schedule" className="mx-2">Schedule</Nav.Link>
-                </Nav>
-
-            </Container>
-        </Navbar>
-        </>
+        <Box>
+            <AppBar position="fixed" sx={{
+                justifyContent: "center",
+                zIndex: (theme) => theme.zIndex.drawer + 1, 
+                display: 'flex',
+                width: '100%',
+                alignItems: 'center',
+                backgroundColor: navbarBgColor,
+                boxShadow: 'none',
+                backdropFilter: 'blur(10px)', // Blur effect
+                WebkitBackdropFilter: 'blur(10px)', // safari compatibility
+            }}>
+                <Toolbar sx={{width: '90%', display: 'flex', justifyContent: 'space-between'}}>
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                        <Link to="/" sx={{textDecoration: 'none'}}><AssignmentIndTwoToneIcon sx={{ color: theme.palette.accent.main }}/></Link>
+                    </Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                        <Link>
+                            <Button sx={{ mx: 1, textTransform: 'none', color: theme.palette.accent.main }} disableElevation>tasks</Button>
+                        </Link>
+                        <Link>
+                            <Button sx={{ mx: 1, textTransform: 'none', color: theme.palette.accent.main }} disableElevation>schedule</Button>
+                        </Link>
+                        <ThemeToggleButton />
+                    </Box>
+                </Toolbar>
+            </AppBar>
+        </Box>
     );
 }

src/themeContextProvider.js

@@ -0,0 +1,28 @@
+import React, { createContext, useMemo, useState, useContext } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { lightTheme, darkTheme } from './theme';
+
+// Create a context for the theme
+const ThemeContext = createContext();
+
+export const useThemeContext = () => useContext(ThemeContext);
+
+export const ThemeContextProvider = ({ children }) => {
+    const [mode, setMode] = useState('light');
+
+    const toggleTheme = () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+    };
+
+    const theme = useMemo(() => (mode === 'light' ? createTheme(lightTheme) : createTheme(darkTheme)), [mode]);
+
+    return (
+        <ThemeContext.Provider value={{ mode, toggleTheme }}>
+            <ThemeProvider theme={theme}>
+                <CssBaseline />
+                {children}
+            </ThemeProvider>
+        </ThemeContext.Provider>
+    );
+};