Merge pull request #9 from amrahs02/Local-Storage-Persisted-Dark-Mode

Now the dark mode is persisted with browser's local storage

client/src/components/Sidebar.js

@@ -1,26 +1,37 @@
 import Link from './Link';
 import { useState, useEffect } from 'react';
 
-
 function Navbar() {
-  const [theme, setTheme] = useState("light");
+  const [theme, setTheme] = useState(null);
 
   useEffect(() => {
-    if (theme === "dark") {
-      document.documentElement.classList.add("dark");
-      //setTheme("dark");
+    // Check local storage for the theme preference
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      setTheme(savedTheme);
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setTheme('dark');
+    } else {
+      setTheme('light');
     }
-    else {
-      document.documentElement.classList.remove("dark");
-      //setTheme("light");
+  }, []);
+
+  useEffect(() => {
+    // Update the DOM and local storage when theme changes
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
     }
-  }, [theme])
-  console.log(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
 
   const handleThemeSwitch = () => {
-    setTheme(theme === "dark" ? "light" : "dark")
+    // Toggle the theme between light and dark
+    setTheme(theme === 'dark' ? 'light' : 'dark');
   };
 
+
   const links = [
     { label: 'Home', path: '/' },
     { label: 'Summarizer', path: '/text-summarizer' },
@@ -41,17 +52,23 @@ function Navbar() {
     );
   });
 
+
+
   return (
-    <nav className="bg-white shadow-lg p-4 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
+    <nav className={`bg-white shadow-lg p-4 text-gray-800 ${theme === 'dark' ? 'dark:bg-gray-800 dark:text-gray-200' : ''}`}>
       <div className="container mx-auto flex justify-between items-center">
         <div className="text-[30px] font-semibold ">
           <span class="magic"><span class="magic-text">WebScrapideo</span></span>
         </div>
         <div className="flex space-x-4">
           {renderedLinks}
           <div>
-            <button style={{}} className='p-2   rounded-full text-gray-800 dark-bg-green-500 dark:text-gray-200' onClick={handleThemeSwitch}>
-              <i class="fa-solid fa-circle-half-stroke text-4xl dark:text-gray-200"></i>
+            <button
+              style={{}}
+              className={`p-2 rounded-full text-gray-800 ${theme === 'dark' ? 'dark:bg-grey-200 dark:text-gray-200' : ''}`}
+              onClick={handleThemeSwitch}
+            >
+              <i className={`fa-solid fa-circle-half-stroke text-4xl ${theme === 'dark' ? 'dark:text-gray-200' : ''}`}></i>
             </button>
           </div>
         </div>
@@ -60,4 +77,4 @@ function Navbar() {
   );
 }
 
-export default Navbar;
+export default Navbar;