From 134d00e5bd0f15113e256c8446931d830985fbf4 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 21:48:54 +0200
Subject: 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>
---
 themes/danix-xyz-hacker/layouts/partials/header.html | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

(limited to 'themes/danix-xyz-hacker/layouts/partials/header.html')

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) -->
-- 
cgit v1.2.3