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>

1 files changed, 2 insertions, 11 deletions

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) -->