Darkmode toggler

src/components/Admin/BlogCard/BlogCard.module.scss

@@ -1,5 +1,3 @@
-
-
 .blogCard {
   * {
     overflow: auto;

src/components/ConnectionDropBanner/ConnectionDropBanner.jsx

@@ -31,8 +31,8 @@ const ConnectionDropBanner = () => {
         !isConnected
           ? styles.offlinebanner
           : showOnlineBanner
-          ? styles.onlinebanner
-          : styles.hide
+            ? styles.onlinebanner
+            : styles.hide
       }
     >
       {!isConnected && <p>You are offline. Please check your internet connection.</p>}

src/components/GalleryPage/GalleryCard/GalleryCard.css

@@ -2,7 +2,8 @@
   width: 25vw;
   height: 16rem;
   overflow: hidden;
-  box-shadow: 4px 4px 12px var(--box-shadow-color-black-1),
+  box-shadow:
+    4px 4px 12px var(--box-shadow-color-black-1),
     -4px -4px 12px var(--box-shadow-color-black-2);
   border-radius: 8px;
   margin: 2.5vw;

src/components/shared/Navbar/Navbar.jsx

@@ -6,9 +6,18 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
 import "./Navbar.css";
 import axios from "axios";
 import UserContext from "../../../context/UserContext";
+import { ThemeContext } from "../../../context/ThemeContext";
+import ThemeToggleButton from "../ThemeToggleButton/ThemeToggleButton";
+
+// import { FaMoon } from "react-icons/fa";
+// import { IoSunny } from "react-icons/io5";
+
 const Navbar = () => {
   const navigate = useNavigate();
   const [toggle, setToggle] = useState(false);
+  const { isDarkMode, toggleTheme, setIsDarkMode, setCurrentMode } =
+    useContext(ThemeContext);
+  // const storedTheme = localStorage.getItem("isDarkMode");
 
   const handleToggle = () => {
     setToggle(!toggle);
@@ -61,7 +70,7 @@ const Navbar = () => {
 
   return (
     <nav
-      className={toggle ? "navbar1 expanded" : "navbar1"}
+      className={`navbar1 ${toggle ? "expanded" : ""} ${isDarkMode ? "dark-theme" : ""}`}
       id={bgChng ? "bgchng" : ""}
       style={{ userSelect: "none" }}
     >
@@ -116,6 +125,8 @@ const Navbar = () => {
             <NavLink to="/signup">SIGN UP</NavLink>
           </li>
         )}
+
+        <ThemeToggleButton />
       </ul>
     </nav>
   );

src/components/shared/Navbar/NavbarTeam.jsx

@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { useContext } from "react";
 import UserContext from "../../../context/UserContext";
+import ThemeToggleButton from "../ThemeToggleButton/ThemeToggleButton";
 
 const NavbarTeam = () => {
   const [toggle, setToggle] = useState(false);
@@ -111,6 +112,7 @@ const NavbarTeam = () => {
             <NavLink to="/signup">SIGN UP</NavLink>
           </li>
         )}
+        <ThemeToggleButton />
       </ul>
     </nav>
   );

src/components/shared/ThemeToggleButton/ThemeToggleButton.jsx

@@ -0,0 +1,46 @@
+import React, { useContext } from "react";
+import { FaMoon } from "react-icons/fa";
+import { IoSunny } from "react-icons/io5";
+import { ThemeContext } from "../../../context/ThemeContext";
+
+const ThemeToggleButton = () => {
+  const { isDarkMode, toggleTheme } = useContext(ThemeContext);
+
+  return (
+    // <button onClick={toggleTheme} style={{ border: 'none', backgroundColor: 'transparent' }}>
+    //   <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    //     {isDarkMode ? (
+    //       <IoSunny size={isDarkMode ? 20 : 18} style={{ color: 'white' }} />
+    //     ) : (
+    //       <FaMoon size={isDarkMode ? 18 : 20} style={{ color: 'black' }} />
+    //     )}
+    //   </div>
+    // </button>
+    <button
+      onClick={toggleTheme}
+      style={{
+        border: "none",
+        backgroundColor: "transparent",
+        marginBottom: "15px",
+      }}
+    >
+      <div
+        style={{
+          width: "30px",
+          height: "30px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {isDarkMode ? (
+          <IoSunny size={isDarkMode ? 20 : 18} style={{ color: "white" }} />
+        ) : (
+          <FaMoon size={isDarkMode ? 18 : 20} style={{ color: "black" }} />
+        )}
+      </div>
+    </button>
+  );
+};
+
+export default ThemeToggleButton;

src/context/ThemeContext.jsx

@@ -0,0 +1,87 @@
+import { useRef } from "react";
+import { createContext, useState, useEffect } from "react";
+
+const ThemeContext = createContext({
+  isDarkMode: false,
+  toggleTheme: () => {},
+});
+
+function ThemeContextProvider({ children }) {
+  let currentMode = localStorage.getItem("isDarkMode");
+
+  console.log(typeof currentMode);
+
+  //   useEffect(() => {
+
+  //     currentMode = localStorage.getItem("isDarkMode");
+
+  //     if (currentMode == null) {
+  //       currentMode = "false";
+  //       localStorage.setItem("isDarkMode", "false");
+  //     } else {
+  //       if (currentMode == "false") {
+  //         document.body.classList.remove("dark-theme");
+  //         localStorage.setItem("isDarkMode", "false");
+  //       } else {
+  //         document.body.classList.add("dark-theme");
+  //         localStorage.setItem("isDarkMode", "true");
+  //       }
+  //     }
+
+  //   },[])
+  // }
+  // if (currentMode == null) {
+  //   currentMode = "false";
+  //   localStorage.setItem("isDarkMode", "false");
+  // } else {
+  //   if (currentMode == "false") {
+  //     document.body.classList.remove("dark-theme");
+  //     localStorage.setItem("isDarkMode", "false");
+  //   } else {
+  //     document.body.classList.add("dark-theme");
+  //     localStorage.setItem("isDarkMode", "true");
+  //   }
+  // }
+
+  const [isDarkMode, setIsDarkMode] = useState(currentMode != "false");
+  if (isDarkMode) {
+    localStorage.setItem("isDarkMode", "true");
+  } else {
+    localStorage.setItem("isDarkMode", "false");
+  }
+
+  useEffect(() => {
+    const currentMode = localStorage.getItem("isDarkMode");
+
+    if (currentMode !== null) {
+      setIsDarkMode(currentMode === "true");
+    }
+
+    if (isDarkMode) {
+      document.body.classList.add("dark-theme");
+    } else {
+      document.body.classList.remove("dark-theme");
+    }
+  }, [isDarkMode]);
+  // const [isDarkMode, setIsDarkMode] = useState(currentMode != "false");
+  // if (isDarkMode) {
+  //   localStorage.setItem("isDarkMode", "true");
+  // } else {
+  //   localStorage.setItem("isDarkMode", "false");
+  // }
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    if (currentMode == "false") {
+      document.body.classList.remove("dark-theme");
+    } else {
+      document.body.classList.add("dark-theme");
+    }
+  };
+  return (
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme, setIsDarkMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export { ThemeContext, ThemeContextProvider };

src/pages/Events/Events.jsx

@@ -6,7 +6,10 @@ import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
 // import UpcomingEvents from '../../components/EventsPage/UpcomingEvents';
 import PastEvents from "../../components/EventsPage/PastEvents";
+import { ThemeContext } from "../../context/ThemeContext";
+import { useContext } from "react";
 const Events = () => {
+  const { isDarkMode, setIsDarkMode } = useContext(ThemeContext);
   useEffect(() => {
     document.title = "Events | E-Cell NIT Silchar";
   }, []);

src/pages/Home/Home.jsx

@@ -10,7 +10,10 @@ import Footer from "../../components/shared/Footer/Footer";
 import Footerconstant from "../../components/shared/FooterConstant/Footerconstant";
 import Contactus from "../../components/Home/Contact/Contactus";
 import ScrollToSection from "../../components/shared/ScrollToSection/Scroll";
+import { ThemeContext } from "../../context/ThemeContext";
+import { useContext } from "react";
 const Home = () => {
+  const { isDarkMode, setIsDarkMode } = useContext(ThemeContext);
   useEffect(() => {
     document.title = "E-Cell | NIT Silchar";
   }, []);