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 <noreply@anthropic.com>

2 files changed, 25 insertions, 25 deletions

diff --git a/themes/danix-xyz-hacker/assets/js/theme-toggle.js b/themes/danix-xyz-hacker/assets/js/theme-toggle.js
index 3a4fda2..bb95b2a 100644
--- 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 ec12b52..49493c6 100644
--- 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) -->