Replace single icon toggle with dual sun/moon toggle switch

- Show both sun and moon icons simultaneously in toggle button
- Add sliding thumb indicator that moves between icons
- Sun icon highlighted in light mode, moon in dark mode
- Click anywhere on the button to toggle between modes
- Smooth sliding animation when switching themes

Co-authored-by: Claude <noreply@anthropic.com>
🤖 Generated with Claude Code

Author: lenis2000

_includes/footer.html

@@ -78,34 +78,7 @@
   // Apply theme to document
   function applyTheme(theme) {
     document.documentElement.setAttribute('data-theme', theme);
-    updateThemeIcon(theme);
-  }
-
-  // Update the theme toggle icon
-  function updateThemeIcon(theme) {
-    const icons = document.querySelectorAll('#theme-icon, #theme-icon-mobile');
-    
-    icons.forEach(icon => {
-      if (icon) {
-        // Add rotation animation
-        icon.style.transform = 'rotate(180deg)';
-        
-        setTimeout(() => {
-          if (theme === 'dark') {
-            icon.classList.remove('fa-sun');
-            icon.classList.add('fa-moon');
-          } else {
-            icon.classList.remove('fa-moon');
-            icon.classList.add('fa-sun');
-          }
-          
-          // Reset rotation after icon change
-          setTimeout(() => {
-            icon.style.transform = '';
-          }, 10);
-        }, 150);
-      }
-    });
+    // No need to update icons as both are always visible
   }
 
   // Toggle theme

_includes/navbar.html

@@ -19,8 +19,12 @@
     </div>
 
     <!-- Dark mode toggle for mobile -->
-    <button class="theme-toggle-single d-md-none me-2" id="theme-toggle-mobile" title="Toggle dark mode">
-      <i class="fas fa-sun" id="theme-icon-mobile"></i>
+    <button class="theme-toggle-dual d-md-none me-2" id="theme-toggle-mobile" title="Toggle dark mode">
+      <span class="toggle-track">
+        <i class="fas fa-sun"></i>
+        <i class="fas fa-moon"></i>
+        <span class="toggle-thumb"></span>
+      </span>
     </button>
 
     <!-- Secondary menu toggle - right side (only for special pages) -->
@@ -68,8 +72,12 @@
     </ul>
     <ul class="navbar-nav ms-auto align-items-center">
       <li class="nav-item d-flex align-items-center">
-        <button class="theme-toggle-single me-2" id="theme-toggle" title="Toggle dark mode">
-          <i class="fas fa-sun" id="theme-icon"></i>
+        <button class="theme-toggle-dual me-2" id="theme-toggle" title="Toggle dark mode">
+          <span class="toggle-track">
+            <i class="fas fa-sun"></i>
+            <i class="fas fa-moon"></i>
+            <span class="toggle-thumb"></span>
+          </span>
         </button>
       </li>
       <li class="nav-item">

css/main.css

@@ -608,81 +608,111 @@ footer {
   border-top: 1px solid var(--border-color);
 }
 
-/* Dark mode toggle button */
-.theme-toggle-single {
-  background-color: rgba(0, 47, 108, 0.1);
+/* Dark mode toggle button with dual icons */
+.theme-toggle-dual {
+  background: none;
   border: none;
-  color: #002F6C;
   cursor: pointer;
-  font-size: 1rem;
-  padding: 0.5rem 0.75rem;
-  transition: all 0.3s ease;
-  border-radius: 20px;
+  padding: 0;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
   position: relative;
   z-index: 1000;
 }
 
-/* Icon animation */
-.theme-toggle-single i {
-  transition: transform 0.3s ease;
+.toggle-track {
+  display: inline-flex;
+  align-items: center;
+  background-color: rgba(0, 47, 108, 0.15);
+  border-radius: 20px;
+  padding: 4px;
+  position: relative;
+  transition: background-color 0.3s ease;
+  gap: 6px;
 }
 
-.theme-toggle-single:active i {
-  transform: rotate(180deg) scale(0.9);
+.toggle-track i {
+  font-size: 0.9rem;
+  padding: 4px 6px;
+  position: relative;
+  z-index: 2;
+  transition: color 0.3s ease;
 }
 
-/* In light navbar */
-.navbar-light .theme-toggle-single {
-  background-color: rgba(0, 47, 108, 0.1);
+.toggle-track .fa-sun {
   color: #002F6C;
 }
 
-.theme-toggle-single:hover {
-  background-color: rgba(0, 47, 108, 0.2);
-  transform: scale(1.05);
+.toggle-track .fa-moon {
+  color: rgba(0, 47, 108, 0.4);
 }
 
-.theme-toggle-single:active {
-  transform: scale(0.95);
+.toggle-thumb {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: calc(50% - 4px);
+  height: calc(100% - 8px);
+  background-color: white;
+  border-radius: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease;
 }
 
-.theme-toggle-single:focus {
+.theme-toggle-dual:hover .toggle-track {
+  background-color: rgba(0, 47, 108, 0.25);
+}
+
+.theme-toggle-dual:focus {
   outline: none;
+}
+
+.theme-toggle-dual:focus .toggle-track {
   box-shadow: 0 0 0 3px rgba(0, 47, 108, 0.3);
 }
 
-/* Dark theme adjustments */
-[data-theme="dark"] .theme-toggle-single {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: #e8e8e8;
+/* Dark theme state */
+[data-theme="dark"] .toggle-track {
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
-[data-theme="dark"] .navbar-light .theme-toggle-single {
-  background-color: rgba(255, 255, 255, 0.1);
+[data-theme="dark"] .toggle-track .fa-sun {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+[data-theme="dark"] .toggle-track .fa-moon {
   color: #e8e8e8;
 }
 
-[data-theme="dark"] .theme-toggle-single:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+[data-theme="dark"] .toggle-thumb {
+  transform: translateX(100%);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
-[data-theme="dark"] .theme-toggle-single:focus {
+[data-theme="dark"] .theme-toggle-dual:hover .toggle-track {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+[data-theme="dark"] .theme-toggle-dual:focus .toggle-track {
   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
 }
 
 /* Mobile styling */
 @media (max-width: 767px) {
-  .theme-toggle-single {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.9rem;
+  .toggle-track {
+    padding: 3px;
+    gap: 4px;
+  }
+  
+  .toggle-track i {
+    font-size: 0.8rem;
+    padding: 3px 5px;
   }
 }
 
 /* Align with nav items on desktop */
 @media (min-width: 768px) {
-  .navbar-nav .theme-toggle-single {
+  .navbar-nav .theme-toggle-dual {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }