fix: darkmode doesn't stay on refresh #218 (#236)

* fix: darkmode doesn't stay on refresh #218

* Update src/components/navbar.jsx

Co-authored-by: Njong Emy <81039882+Njong392@users.noreply.github.com>

* Update navbar.jsx

---------

Co-authored-by: Njong Emy <81039882+Njong392@users.noreply.github.com>

src/components/navbar.jsx

@@ -2,11 +2,11 @@ import { useEffect } from "react";
 import { useState } from "react";
 import Logo from "../assets/logo.png";
 
-
 const Navbar = () => {
-  const [theme, setTheme] = useState("dark");
+  const defaultTheme = localStorage.getItem("theme") || "light";
+  const [theme, setTheme] = useState(defaultTheme);
   const element = document.documentElement;
-  
+
   const icons = [
     {
       icon: "moon",
@@ -18,24 +18,22 @@ const Navbar = () => {
     }
   ];
 
-
-  useEffect(()=>{
-    switch(theme){
-      case 'dark':
-        element.classList.add('dark');
-        localStorage.setItem('theme', 'light');
+  useEffect(() => {
+    switch (theme) {
+      case "dark":
+        element.classList.add("dark");
+        localStorage.setItem("theme", "dark");
         break;
-      case 'light':
-        element.classList.remove('dark');
-        localStorage.setItem('theme', 'dark');
+      case "light":
+        element.classList.remove("dark");
+        localStorage.setItem("theme", "light");
         break;
       default:
-        localStorage.removeItem('theme');
-        
+        localStorage.removeItem("theme");
+
         break;
     }
-  }, [theme])
-
+  }, [theme]);
 
   return (
     <nav className="px-8  bg-dark">
@@ -49,7 +47,8 @@ const Navbar = () => {
         </div>
 
         <div className="flex items-center md:flex">
-          <a href="https://github.com/Njong392/Abbreve"
+          <a
+            href="https://github.com/Njong392/Abbreve"
             target="_blank"
             rel="noopener noreferrer">
             <svg
@@ -64,19 +63,17 @@ const Navbar = () => {
             </svg>
           </a>
 
-          {
-            icons?.map(icon => (
-
-              <div className="rounded-lg" key={icon.text} >
-              <button          
-              onClick = {()=> setTheme(icon.text)}
-              className={`w-8 h-8 leading-9 text-xl rounded-full m-1 text-ash ${theme === icon.text && `text-deeppurple`}`}>
+          {icons?.map((icon) => (
+            <div className="rounded-lg" key={icon.text}>
+              <button
+                onClick={() => setTheme(icon.text)}
+                className={`w-8 h-8 leading-9 text-xl rounded-full m-1 text-ash ${
+                  theme === icon.text && `text-deeppurple`
+                }`}>
                 <ion-icon name={icon.icon}></ion-icon>
               </button>
             </div>
-            ))
-          }
-
+          ))}
         </div>
       </div>
     </nav>