update toogle

static/js/custom.js

@@ -109,18 +109,32 @@ window.onload = function () {
     ?.addEventListener("click", toggleMenu);
 
   // Theme toggle logic
+  function updateThemeIcons() {
+    const isDark = document.documentElement.classList.contains("dark");
+    const toggles = document.querySelectorAll(".theme-toggle-btn");
+    toggles.forEach((btn) => {
+      const lightIcon = btn.querySelector(".theme-toggle-light-icon");
+      const darkIcon = btn.querySelector(".theme-toggle-dark-icon");
+      if (!lightIcon || !darkIcon) return;
+      if (isDark) {
+        lightIcon.classList.add("hidden");
+        darkIcon.classList.remove("hidden");
+      } else {
+        lightIcon.classList.remove("hidden");
+        darkIcon.classList.add("hidden");
+      }
+    });
+  }
+
   function setTheme(theme) {
     if (theme === "dark") {
       document.documentElement.classList.add("dark");
       localStorage.setItem("theme", "dark");
-      if (document.getElementById("theme-toggle-icon")) document.getElementById("theme-toggle-icon").textContent = "🌙";
-      if (document.getElementById("theme-toggle-icon-mobile")) document.getElementById("theme-toggle-icon-mobile").textContent = "🌙";
     } else {
       document.documentElement.classList.remove("dark");
       localStorage.setItem("theme", "light");
-      if (document.getElementById("theme-toggle-icon")) document.getElementById("theme-toggle-icon").textContent = "☀️";
-      if (document.getElementById("theme-toggle-icon-mobile")) document.getElementById("theme-toggle-icon-mobile").textContent = "☀️";
     }
+    updateThemeIcons();
   }
 
   // Initial theme
@@ -133,17 +147,12 @@ window.onload = function () {
     setTheme("light");
   }
 
-  // Toggle event listeners
+  // Toggle event listeners (support multiple buttons)
-  const themeToggle = document.getElementById("theme-toggle");
+  const themeToggleButtons = document.querySelectorAll(".theme-toggle-btn");
-  if (themeToggle) {
+  themeToggleButtons.forEach((btn) => {
-    themeToggle.addEventListener("click", function () {
+    btn.addEventListener("click", function () {
-      setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
+      const isDark = document.documentElement.classList.contains("dark");
+      setTheme(isDark ? "light" : "dark");
     });
-  }
-  const themeToggleMobile = document.getElementById("theme-toggle-mobile");
-  if (themeToggleMobile) {
-    themeToggleMobile.addEventListener("click", function () {
-      setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
   });
-  }
 };

templates/partials/header.html

@@ -18,8 +18,15 @@
      
             <div class="mr-2 -my-2 lg:hidden flex justify-center items-center">
                                  <!-- Dark/Light mode toggle button -->
-         <button id="theme-toggle" aria-label="Toggle dark mode" class="mr-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-gray-400 hover:bg-gray-700 transition duration-150 ease-in-out">
+         <button type="button" class="theme-toggle-btn text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2">
-            <span id="theme-toggle-icon">🌙</span>
+            <!-- Sun icon (light mode) -->
+            <svg class="theme-toggle-light-icon hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+            </svg>
+            <!-- Moon icon (dark mode) -->
+            <svg class="theme-toggle-dark-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
           </button>
                 <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-50 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                     <!-- Heroicon name: menu -->
@@ -67,8 +74,15 @@
 {% endfor %}
 
   <!-- Dark/Light mode toggle button -->
-         <button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
+         <button type="button" class="theme-toggle-btn text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none">
-            <span id="theme-toggle-icon">🌙</span>
+            <!-- Sun icon (light mode) -->
+            <svg class="theme-toggle-light-icon hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+            </svg>
+            <!-- Moon icon (dark mode) -->
+            <svg class="theme-toggle-dark-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
           </button>
         
 </nav>