Merge pull request #1826 from anujsharma8d/fix/appearance-toggle

fix: restore theme toggle and appearance dropdown functionality

Author: steam-bell-92

web-app/css/styles.css

@@ -529,6 +529,7 @@ body.sidebar-active .sidebar-dock {
 
 .sidebar-controls {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 8px;
   width: 100%;
@@ -557,7 +558,7 @@ body.sidebar-active .sidebar-dock {
   gap: 0.35rem;
   min-width: 160px;
   max-width: 220px;
-  flex: 1 1 160px;
+  /* flex: 1 1 160px; */
 }
 
 .theme-selector-label {
@@ -646,6 +647,10 @@ body.sidebar-active .sidebar-dock {
   color: var(--text);
 }
 
+body.sidebar-collapsed .theme-picker {
+  display: none ;
+}
+
 [data-theme="dark"] .theme-picker {
   background: #26232b;
   border-color: #3d3947;

web-app/index.html

@@ -30,7 +30,7 @@
   <title>Python Mini Projects — Interactive Web Edition</title>
   <link href="assets/favicon.svg" rel="icon" type="image/svg+xml" />
   <link rel="manifest" href="manifest.json" />
-  <link href="css/styles.css?v=2" rel="stylesheet" />
+  <link href="css/styles.css?v=3" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -170,25 +170,25 @@
           <button aria-label="Switch theme" class="theme-toggle" id="sidebarThemeToggle" type="button">
             <i class="fas fa-moon" aria-hidden="true"></i>
           </button>
-          <div class="theme-selector">
-            <span class="theme-selector-label">Appearance</span>
-            <button id="themeModePicker" class="theme-picker" type="button" aria-haspopup="listbox"
-              aria-expanded="false">
-              <span class="theme-picker-value">Auto (System)</span>
-              <i class="fas fa-chevron-down theme-picker-chevron" aria-hidden="true"></i>
-            </button>
-            <ul id="themeModeMenu" class="theme-picker-menu" role="listbox" aria-label="Theme mode options">
-              <li role="option" class="theme-picker-option" data-value="auto" aria-selected="true">
-                Auto (System)
-              </li>
-              <li role="option" class="theme-picker-option" data-value="light" aria-selected="false">
-                Light
-              </li>
-              <li role="option" class="theme-picker-option" data-value="dark" aria-selected="false">
-                Dark
-              </li>
-            </ul>
-          </div>
+        </div>
+        <div class="theme-selector">
+          <span class="theme-selector-label">Appearance</span>
+          <button id="themeModePicker" class="theme-picker" type="button" aria-haspopup="listbox"
+            aria-expanded="false">
+            <span class="theme-picker-value">Auto (System)</span>
+            <i class="fas fa-chevron-down theme-picker-chevron" aria-hidden="true"></i>
+          </button>
+          <ul id="themeModeMenu" class="theme-picker-menu" role="listbox" aria-label="Theme mode options">
+            <li role="option" class="theme-picker-option" data-value="auto" aria-selected="true">
+              Auto (System)
+            </li>
+            <li role="option" class="theme-picker-option" data-value="light" aria-selected="false">
+              Light
+            </li>
+            <li role="option" class="theme-picker-option" data-value="dark" aria-selected="false">
+              Dark
+            </li>
+          </ul>
         </div>
 
         <button aria-label="Toggle Sidebar" class="collapse-sidebar-btn" id="sidebarCollapseBtn" type="button">
@@ -630,7 +630,7 @@ <h3>Stay Updated</h3>
   <script defer src="js/projects.js?v=4"></script>
   <script defer src="js/cm-editor.js"></script>
   <script defer src="js/playground.js"></script>
-  <script defer type="module" src="js/main.js?v=2"></script>
+  <script defer type="module" src="js/main.js?v=3"></script>
   <script defer src="js/hero-canvas.js"></script>
   <script defer src="js/projects/war-card-game.js"></script>
   <script defer src="js/projects/number-sliding-puzzle.js"></script>
@@ -1282,7 +1282,7 @@ <h3>${project.title}</h3>
     })();
   </script>
 
-  //THEME TOGGLE
+  <!-- THEME TOGGLE -->
   <script>
     (function () {
       const html = document.documentElement;

web-app/js/main.js

@@ -119,15 +119,15 @@ function applyThemeMode(mode) {
       theme === 'light'
         ? '<i class="fas fa-sun" aria-hidden="true"></i>'
         : '<i class="fas fa-moon" aria-hidden="true"></i>';
-    updateThemeToggleAria(newTheme === 'light');
+    updateThemeToggleAria(theme === 'light');
   });
 }
 
 const savedTheme = localStorage.getItem('theme') || 'dark';
 html.setAttribute('data-theme', savedTheme);
 syncThemeColor(savedTheme);
-if (themeToggle) {
-  themeToggle.innerHTML =
+if (themeToggles) {
+  themeToggles.innerHTML =
     savedTheme === 'light'
       ? '<i class="fas fa-sun" aria-hidden="true"></i>'
       : '<i class="fas fa-moon" aria-hidden="true"></i>';
@@ -209,7 +209,7 @@ function showInfoModal(title, steps) {
     newClose.addEventListener("click", function (e) {
       e.preventDefault();
       closeModal();
-    };
+    });
   }
 
   if (gotItBtn) {
@@ -218,7 +218,7 @@ function showInfoModal(title, steps) {
     newGotIt.addEventListener("click", function (e) {
       e.preventDefault();
       closeModal();
-    };
+    });
   }
 
   overlay.onclick = function (e) {
@@ -364,6 +364,51 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
+  // Theme toggle
+themeToggles.forEach((toggle) => {
+  toggle.addEventListener("click", () => {
+    const current =
+      document.documentElement.getAttribute("data-theme") === "dark"
+        ? "dark"
+        : "light";
+
+    const next = current === "dark" ? "light" : "dark";
+    applyThemeMode(next);
+    setThemePickerLabel(next);
+  });
+});
+
+// Appearance dropdown
+if (themeModePicker && themeModeMenu) {
+  themeModePicker.addEventListener("click", (e) => {
+    e.stopPropagation();
+
+    if (themeModeMenu.classList.contains("active")) {
+      closeThemeMenu();
+    } else {
+      openThemeMenu();
+    }
+  });
+
+  themeModeMenu.querySelectorAll(".theme-picker-option").forEach((option) => {
+    option.addEventListener("click", () => {
+      const mode = option.dataset.value;
+      applyThemeMode(mode);
+      setThemePickerLabel(mode);
+      closeThemeMenu();
+    });
+  });
+
+  document.addEventListener("click", (e) => {
+    if (
+      !themeModePicker.contains(e.target) &&
+      !themeModeMenu.contains(e.target)
+    ) {
+      closeThemeMenu();
+    }
+  });
+}
+
   /* ── Sound Toggle (Multi-Element Support) ─────────────────────────── */
   var soundToggles = document.querySelectorAll(".sound-toggle");
 

web-app/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'python-mini-projects-v3';
+const CACHE_NAME = 'python-mini-projects-v4';
 
 const PRECACHE_ASSETS = [
   './',