From 68afb3e96391ca5dea8c46764cf6bd8a33c9ebd7 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 21:46:40 +0200
Subject: Fix theme toggle icon state sync on page navigation

The Alpine.js state was reading from localStorage instead of the actual
class on the html element, causing the icon to be out of sync with the
actual theme. Now we initialize the Alpine state by checking the current
html classList, which is set by the page-load script in baseof.html.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/layouts/partials/header.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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

diff --git a/themes/danix-xyz-hacker/layouts/partials/header.html b/themes/danix-xyz-hacker/layouts/partials/header.html
index 7f99748..ec12b52 100644
--- a/themes/danix-xyz-hacker/layouts/partials/header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/header.html
@@ -48,8 +48,15 @@
       <!-- Theme toggle button -->
       <button
         id="theme-toggle"
-        x-data="{ theme: localStorage.getItem('theme') || 'dark' }"
-        @click="theme = theme === 'dark' ? 'light' : 'dark'; document.documentElement.className = 'theme-' + theme; localStorage.setItem('theme', theme)"
+        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"
       >
-- 
cgit v1.2.3