Fix theme toggle icon to always sync with actual page theme

Replace Alpine.js conditional rendering with plain JavaScript that:
- Reads the actual theme class from the html element on page load
- Updates icon visibility based on the real DOM state, not internal state
- Handles navigation correctly since it checks the current class every time

This fixes the issue where navigating between pages caused the icon to
become out of sync with the actual theme being displayed.

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/js/theme-toggle.js b/themes/danix-xyz-hacker/assets/js/theme-toggle.js
index 3a4fda2ba00bc48440e330656bb86f6c98e2696e..bb95b2afca4226a65c8e699bed8415490ac14802 100644 (file)
--- a/themes/danix-xyz-hacker/assets/js/theme-toggle.js
+++ b/themes/danix-xyz-hacker/assets/js/theme-toggle.js
@@ -1,5 +1,25 @@
 document.addEventListener('DOMContentLoaded', function() {
   const themeToggle = document.getElementById('theme-toggle');
+  const sunIcon = document.getElementById('theme-icon-sun');
+  const moonIcon = document.getElementById('theme-icon-moon');
+
+  function updateThemeIcon() {
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    if (sunIcon && moonIcon) {
+      if (isDark) {
+        sunIcon.style.display = 'block';
+        moonIcon.style.display = 'none';
+      } else {
+        sunIcon.style.display = 'none';
+        moonIcon.style.display = 'block';
+      }
+    }
+  }
+
+  // Update icon on initial load
+  if (sunIcon && moonIcon) {
+    updateThemeIcon();
+  }
 
   if (!themeToggle) {
     return;
@@ -19,23 +39,12 @@ document.addEventListener('DOMContentLoaded', function() {
     // Add the new theme class
     htmlElement.classList.add(`theme-${newTheme}`);
 
-    // Update article type badge colors
-    const badges = document.querySelectorAll('[data-theme-dark-color]');
-    badges.forEach(badge => {
-      if (newTheme === 'dark') {
-        const darkColor = badge.getAttribute('data-theme-dark-color');
-        badge.style.color = darkColor;
-        badge.style.backgroundColor = darkColor + '20';
-      } else {
-        const lightColor = badge.style.color; // Already set to light in HTML
-        badge.style.color = lightColor;
-        // backgroundColor stays as is (light color with opacity)
-      }
-    });
-
     // Persist to localStorage
     localStorage.setItem('theme', newTheme);
 
+    // Update icon display
+    updateThemeIcon();
+
     // Update Feather Icons if available
     if (window.feather) {
       window.feather.replace();

diff --git a/themes/danix-xyz-hacker/layouts/partials/header.html b/themes/danix-xyz-hacker/layouts/partials/header.html
index ec12b52ae3b811f1aeab3e8d81c003aad24a1281..49493c6374fc4779e26494848fe1d47f30d32d7c 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/header.html
@@ -48,20 +48,11 @@
       <!-- Theme toggle button -->
       <button
         id="theme-toggle"
-        x-data="{
-          theme: document.documentElement.classList.contains('theme-light') ? 'light' : 'dark',
-          toggle() {
-            this.theme = this.theme === 'dark' ? 'light' : 'dark';
-            document.documentElement.className = 'theme-' + this.theme;
-            localStorage.setItem('theme', this.theme);
-          }
-        }"
-        @click="toggle()"
         aria-label="{{ i18n "toggleTheme" }}"
         class="p-2 rounded hover:bg-surface transition-colors"
       >
-        <i x-show="theme === 'dark'" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i>
-        <i x-show="theme === 'light'" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i>
+        <i id="theme-icon-sun" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i>
+        <i id="theme-icon-moon" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i>
       </button>
 
       <!-- Hamburger menu button (mobile only) -->