commitra · Hrishikesh-Dalal · Oct 18, 2025 · Oct 17, 2025 · Oct 17, 2025 · Oct 17, 2025
diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png
diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png
diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png
diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png
diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png
diff --git a/favicon/favicon.ico b/favicon/favicon.ico
diff --git a/index.html b/index.html
@@ -1,15 +1,24 @@
 <!doctype html>
 <html lang="en" data-theme="light">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Verse - Free API Dashboard</title>
-    <meta name="description" content="All-in-one dashboard showcasing multiple free public APIs (Hacktoberfest)." />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>React Verse - Free API Dashboard</title>
+  <meta name="description" content="All-in-one dashboard showcasing multiple free public APIs (Hacktoberfest)." />
+  <link rel="icon" type="image/svg+xml" href="favicon/favicon.ico" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/android-chrome-512x512.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="favicon/android-chrome-192x192.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/src/App.jsx b/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 */}

diff --git a/src/components/Navbar.jsx b/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>
   );
 }
diff --git a/src/components/ThemeSwitcher.jsx b/src/components/ThemeSwitcher.jsx