Add Light Mode

package.json

@@ -7,6 +7,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-google-maps/api": "^2.19.2",
+    "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,6 +21,7 @@
     "react-i18next": "^13.2.2",
     "react-leaflet": "^4.2.1",
     "react-masonry-css": "^1.0.16",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.0",
     "react-simple-typewriter": "^5.0.1",

src/App.js

@@ -5,9 +5,13 @@ import ContainerCard from "./Components/ContainerCard/ContainerCard";
 import Contributors from "./Jsons/Contributors.json";
 import Footer from "./Components/Footer/Footer";
 import RandomContributors from "./Components/randomcontributor/RandomContributors";
+import { useSelector } from "react-redux";
+import { getToggle } from "./Redux/Slices/ModeToggle";
 
 const App = () => {
   const [showButton, setShowButton] = useState(false);
+  const mode = useSelector(getToggle);
+
   const handleScrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
@@ -43,7 +47,7 @@ const App = () => {
       <RandomContributors />
       <div
         className="flex justify-content-center"
-        style={{ marginTop: "50px", padding: "50px" }}
+        style={{ marginTop: "50px", padding: "50px", backgroundColor: mode ? "white" : "" }}
       >
         <ContainerCard>
           <MasonryLayout users={Contributors} />

src/Components/Elements/Button/Button.module.css

@@ -1,18 +1,18 @@
 .button {
-    padding: 14px 21px;
-    border-radius: 16px;
-    cursor: pointer;
-  }
+  padding: 14px 21px;
+  border-radius: 16px;
+  cursor: pointer;
+}
 
-  .button.matrix {
-    background-color: #006DFF;
-    transition: .5s;
-  }
+.button.matrix {
+  background-color: #006DFF;
+  transition: .5s;
+}
 
-  .button.matrix:hover {
-    filter: brightness(1);
-  }
+.button.matrix:hover {
+  filter: brightness(1);
+}
 
-  .button:hover {
-    background-color: #FEEA3A;
-  }
+.button:hover {
+  background-color: #FEEA3A;
+}

src/Components/Header/Header.jsx

@@ -11,11 +11,14 @@ import Nav from "../Nav/Nav";
 import BrickLayout from "../BrickLayout/BrickLayout";
 import { Typewriter } from "react-simple-typewriter";
 import RandomContributors from "../randomcontributor/RandomContributors";
+import { useDispatch, useSelector } from "react-redux";
+import { getToggle, setToggle } from "../../Redux/Slices/ModeToggle";
 
 // Header component
 const Header = () => {
   const [isMobile, setIsMobile] = useState(window.innerWidth > 640);
-
+  const dispatch = useDispatch();
+  const mode = useSelector(getToggle);
   useEffect(() => {
     function handleSize() {
       setIsMobile(window.innerWidth > 640);
@@ -27,37 +30,45 @@ const Header = () => {
     };
   }, []);
   return (
-    <header className={`flex`}>
+    <header className={`flex ${mode ? "bg-light-mode" : ""}`} >
+      <div onClick={() => dispatch(setToggle())} className="mode-toggle">
+        {
+          mode ?
+            <img width={30} height={30} src="./img/brightness.png" />
+            :
+            <img width={30} height={30} src="./img/night-mode.png" />
+        }
+      </div>
       <div className="text__container">
-        <div className="opensource__title">
+        <div className="opensource__title"  >
           <span>
             An Open<br></br> Source<br></br> Project
           </span>
         </div>
 
-        <div className="github__section">
+        <div className={`github__section ${mode ? "text-light-mode" : ""}`} >
           <div>
             <span>
               {" "}
               Join us and <br></br>share your wish
             </span>
           </div>
           <a
-            className="button"
+            className={` ${mode ? " light-button " : "button"}`}
             href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
             target="/black"
           >
             GitHub Repo
           </a>
           <a
-            className="button"
+            className={` ${mode ? " light-button " : "button"}`}
             href="https://before-i-die-achievements.vercel.app/Contributors"
             target="/black"
           >
             Contributors List
           </a>
           <a
-            className="button"
+            className={` ${mode ? " light-button " : "button"}`}
             href="https://before-i-die-achievements.vercel.app/contributors-map"
             target="/black"
           >