Added dark mode

Frontend/src/App.css

@@ -8,6 +8,24 @@ body {
   height: 100vh;
 }
 
+body.light-mode {
+  --background-color: #ffffff;
+  --text-color: #000000;
+  font-family: Arial, sans-serif;
+}
+
+body.dark-mode {
+  --background-color: #121212;
+  --text-color: #ffffff;
+  font-family: Arial, sans-serif;
+
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
 .app-container {
   text-align: center;
   width: 100%;

Frontend/src/App.js

@@ -10,6 +10,7 @@ import UserDashboard from "./UserDashboard";
 import Payments from "./Payment";
 import ApprovePayment from "./ApprovePayments";
 import "./App.css"; 
+import { ThemeProvider } from "./ThemeContext";
 
 function NavBar() {
   const location = useLocation();
@@ -24,6 +25,7 @@ function NavBar() {
   };
 
   return (
+    <ThemeProvider>
     <nav className="nav-bar">
       <ul>
         {/* Show Login link only if userType is null (user not logged in) */}
@@ -65,7 +67,7 @@ function NavBar() {
                 </li>
               </>
             )}
-
+            
             {/* Accessible Logout Button */}
             <li>
               <button 
@@ -88,6 +90,7 @@ function NavBar() {
         )}
       </ul>
     </nav>
+    </ThemeProvider>
   );
 }
 
@@ -116,6 +119,7 @@ ProtectedRoute.propTypes = {
 function App() {
   return (
     <Router>
+      <ThemeProvider>
       <div className="app-container">
         <NavBar /> 
         <Routes>
@@ -134,6 +138,7 @@ function App() {
           <Route path="/approve" element={<ProtectedRoute allowedUserType="Employee"><ApprovePayment /></ProtectedRoute>} />
         </Routes>
       </div>
+      </ThemeProvider>
     </Router>
   );
 }

Frontend/src/EmployeeDashboard.js

@@ -1,9 +1,10 @@
-import React, { useState, useEffect }  from "react";
+import React, { useContext, useState, useEffect }  from "react";
 import { useNavigate } from "react-router-dom";  
-
+import { ThemeContext } from './ThemeContext';
 
 function EmployeeDashboard() {
   const [setMessage] = useState("");
+  const { isDarkMode, toggleTheme } = useContext(ThemeContext);
   const navigate = useNavigate();
   useEffect(() => {
     const accountNumber = localStorage.getItem("accNo");
@@ -18,6 +19,9 @@ function EmployeeDashboard() {
   return (
     <div>
       <h2>Welcome to the Employee Dashboard</h2>
+      <button onClick={toggleTheme}>
+        Toggle {isDarkMode ? 'Light' : 'Dark'} Mode
+      </button>
     </div>
   );
 }

Frontend/src/ThemeContext.js

@@ -0,0 +1,31 @@
+import React, { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    return localStorage.getItem('theme') === 'dark';
+  });
+
+  useEffect(() => {
+    const themeClass = isDarkMode ? 'dark-mode' : 'light-mode';
+    document.body.classList.add(themeClass);
+
+    // Remove the opposite theme class to prevent conflicts
+    document.body.classList.remove(isDarkMode ? 'light-mode' : 'dark-mode');
+
+    // Update localStorage
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+  }, [isDarkMode]);
+
+  const toggleTheme = () => {
+    setIsDarkMode((prevMode) => !prevMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+

Frontend/src/UserDashboard.js

@@ -1,9 +1,11 @@
-import React, { useState, useEffect }  from "react";
+import React, { useState, useEffect, useContext }  from "react";
 import { useNavigate } from "react-router-dom";  
+import { ThemeContext } from './ThemeContext';
 
 
 function UserDashboard() {
   const [setMessage] = useState("");
+  const { isDarkMode, toggleTheme } = useContext(ThemeContext);
   const navigate = useNavigate();
   useEffect(() => {
     const accountNumber = localStorage.getItem("accNo");
@@ -18,6 +20,9 @@ function UserDashboard() {
   return (
     <div>
       <h2>Welcome to the Dashboard</h2>
+      <button onClick={toggleTheme}>
+        Toggle {isDarkMode ? 'Light' : 'Dark'} Mode
+      </button>
     </div>
   );
 }