Dark theme

components/common/Navbar.js

@@ -85,6 +85,22 @@ const Navbar = () => {
     }
   };
 
+  //function for dark mode button
+  useEffect(() => {
+    const handleCheckboxChange = () => {
+      document.body.classList.toggle('dark');
+    };
+    const checkbox = document.getElementById("checkbox");
+    checkbox.addEventListener('change', handleCheckboxChange);
+    return () => {
+      checkbox.removeEventListener('change', handleCheckboxChange);
+    };
+  }, []);
+
+  // styling ball of dark mode button
+  const style = {
+    fontSize: '30px',
+  };
 
   return (
     <>
@@ -303,7 +319,15 @@ const Navbar = () => {
             >
               Contact Us
             </a>
-          </li>
+          </li>  
+              <div>
+                <input type="checkbox" class="checkbox" id="checkbox" />
+                <label for="checkbox" class="label" >
+                  <i class="material-symbols-outlined moon">dark_mode</i>
+                  <i class="material-symbols-outlined sun"> clear_day</i>
+                  <div class="material-symbols-outlined  ball" style={style}>circle</div>
+                </label>
+              </div>
         </ul>
       </nav>
     </>

styles/Navbar.module.css

@@ -1,6 +1,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Proza+Libre&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap");
 
+/* Google icons for dark mode button */
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,100,1,-25");
+
 /* style for logo  */
 .logo {
   position: absolute;

styles/globals.css

@@ -233,3 +233,52 @@ input:focus {
     transform: rotate(0deg);
   }
 }
+
+/* Css for dark mode button */
+* {
+  box-sizing: border-box;
+  padding: 0;
+} 
+
+ body {
+  transition: 0.6s linear;
+}
+
+body.dark{
+  background-color: #111;
+  color: white;
+}
+.label {
+  background-color:#0b0505;
+  border-radius: 30px;
+  position: relative;
+  height: 33px;
+  width: 66px;
+  padding: 3px;
+  display: flex;
+  align-items: center;
+}
+
+.moon {
+  color: yellow;
+}
+
+.sun {
+  color: yellow;
+  margin-left: 12px;
+}
+
+.ball {
+  color: white;
+  position: absolute;
+  transition: transform 0.3s linear;
+}
+
+.checkbox {
+  opacity: 0;
+  position: absolute;
+
+}
+.checkbox:checked+.label .ball {
+  transform: translate(34px);
+}