Implement theme switching with local storage and update Navbar for theme toggle

Author: pratap360

src/App.jsx

@@ -41,19 +41,30 @@ import JokesQuotes from './pages/JokesQuotes.jsx';
 import Pets from './pages/Pets.jsx';
 import Covid from './pages/Covid.jsx';
 import Navbar from './components/Navbar.jsx';
-import ThemeSwitcher from './components/ThemeSwitcher.jsx';
 
 // TODO: Extract theme state into context (see todo 5).
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 export default function App() {
-  const [theme, setTheme] = useState('light');
-  const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));
+  const [theme, setTheme] = useState(() => {
+    return localStorage.getItem('theme') || 'light';
+  });
+  
+  const toggleTheme = () => {
+    setTheme(t => {
+      const newTheme = t === 'light' ? 'dark' : 'light';
+      localStorage.setItem('theme', newTheme);
+      return newTheme;
+    });
+  };
+  
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+  }, [theme]);
 
   return (
     <div className={`app theme-${theme}`}>      
-      <Navbar />
-      <ThemeSwitcher theme={theme} toggleTheme={toggleTheme} />
+      <Navbar theme={theme} toggleTheme={toggleTheme} />
       <main className="container">
         <Routes>
           {/* Different Routes */}

src/components/Navbar.jsx

@@ -1,12 +1,10 @@
 import { NavLink } from 'react-router-dom';
 
-export default function Navbar() {
+export default function Navbar({ theme, toggleTheme }) {
   return (
     <nav className="navbar">
-      <h1 className="logo">React Verse</h1>
-      <button className="nav-toggle" aria-label="Toggle navigation" onClick={() => {
-        document.body.classList.toggle('nav-open');
-      }}>☰</button>
+      <h1 className="logo">🌐 ReactVerse</h1>
+      
       <ul>
         <li><NavLink to="/">Home</NavLink></li>
         <li><NavLink to="/weather">Weather</NavLink></li>
@@ -18,7 +16,25 @@ export default function Navbar() {
         <li><NavLink to="/jokes-quotes">Jokes & Quotes</NavLink></li>
         <li><NavLink to="/pets">Pets</NavLink></li>
         <li><NavLink to="/covid">COVID-19</NavLink></li>
+        <li className="theme-item">
+          <button 
+            className="theme-toggle" 
+            onClick={toggleTheme}
+            aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+          >
+            <span className="theme-text">Theme Switcher</span>
+            <span className="theme-icon">{theme === 'light' ? '🌙' : '☀️'}</span>
+          </button>
+        </li>
       </ul>
+      
+      <button 
+        className="nav-toggle" 
+        aria-label="Toggle navigation" 
+        onClick={() => document.body.classList.toggle('nav-open')}
+      >
+        ☰
+      </button>
     </nav>
   );
 }