From c01c90d4cefe66b88acbe4296704db355c1fe9f6 Mon Sep 17 00:00:00 2001
From: ehab <hassane@codescalers.com>
Date: Mon, 11 Aug 2025 11:13:49 +0300
Subject: [PATCH] update toogle

---
 static/js/custom.js            | 41 +++++++++++++++++++++-------------
 templates/partials/header.html | 26 ++++++++++++++++-----
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/static/js/custom.js b/static/js/custom.js
index cc1edf8..991bb5b 100644
--- a/static/js/custom.js
+++ b/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
-  const themeToggle = document.getElementById("theme-toggle");
-  if (themeToggle) {
-    themeToggle.addEventListener("click", function () {
-      setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
+  // Toggle event listeners (support multiple buttons)
+  const themeToggleButtons = document.querySelectorAll(".theme-toggle-btn");
+  themeToggleButtons.forEach((btn) => {
+    btn.addEventListener("click", function () {
+      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");
-    });
-  }
+  });
 };
diff --git a/templates/partials/header.html b/templates/partials/header.html
index a86cf05..e06ab81 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -18,9 +18,16 @@
      
             <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">
-            <span id="theme-toggle-icon">🌙</span>
-        </button>
+         <button type="button" class="theme-toggle-btn text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2">
+            <!-- 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 -->
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -67,9 +74,16 @@
 {% 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">
-            <span id="theme-toggle-icon">🌙</span>
-        </button>
+         <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">
+            <!-- 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>