Implementing dark and light mode features in this website.

Frontend/src/App.css

@@ -40,3 +40,12 @@
 .read-the-docs {
   color: #888;
 } */
+body.light {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body.dark {
+  background-color: #000000;
+  color: #ffffff;
+}

Frontend/src/App.jsx

@@ -1,13 +1,14 @@
 import SideBarWithNav from "./Components/CommonModule/SideBarModule/SideBar";
 import Gallery from "./Components/GalleryModule/Gallery";
 import "./App.css";
+import { ThemeProvider } from "./ThemeContext";
 
 function App() {
     return (
-        <>
+        <ThemeProvider>
             <SideBarWithNav />
             <Gallery />
-        </>
+        </ThemeProvider>
     );
 }
 

Frontend/src/Components/CommonModule/NavBarModule/NavBar.jsx

@@ -1,8 +1,14 @@
+import React, { useContext } from "react";
 import Search from "/SearchIcon.svg";
 import Profile from "/ProfileIcon.svg";
 import Style from "./NavBar.module.css";
+import { ThemeContext } from "../../../ThemeContext";
 
 const NavBar = () => {
+
+    const { theme, toggleTheme } = useContext(ThemeContext);
+
+
     return (
         <nav className={Style.navbar}>
             <div className={Style.MainContainer}>
@@ -28,6 +34,10 @@ const NavBar = () => {
                     <button className={Style.profileButton}>
                         <img src={Profile} alt="Profile" />
                     </button>
+
+                    <button className={Style.themeToggle} onClick={toggleTheme}>
+            {theme === "dark" ? "☀️" : "🌙"}
+          </button>
                 </div>
             </div>
         </nav>

Frontend/src/Components/CommonModule/NavBarModule/NavBar.module.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     margin: 0;
-    background-color: white;
+    /* background-color: white; */
     border-radius: 10px;
 }
 

Frontend/src/ThemeContext.jsx

@@ -0,0 +1,24 @@
+import React, { createContext, useState, useEffect } from "react";
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(
+    localStorage.getItem("theme") || "light"
+  );
+
+  useEffect(() => {
+    document.body.className = theme;
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

Frontend/src/index.css

@@ -2,13 +2,3 @@
 :root {
     --font-family: 'Comfortaa', sans-serif;
 }
-
-body {
-    margin: 0;
-    font-family: var(--font-family);
-    background-image: url("../public/BACKGROUND.svg");
-    background-size: cover; 
-    background-position: center; 
-    background-repeat: no-repeat; 
-    background-attachment: fixed; 
-}