diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-15 21:46:40 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-15 21:46:40 +0200 |
| commit | 68afb3e96391ca5dea8c46764cf6bd8a33c9ebd7 (patch) | |
| tree | c8e9d8433f693f51e9be9597532a546f9f78c3a0 | |
| parent | 9934e042c1e97765ac839f6c3f06d30f02b5d9d0 (diff) | |
| download | danixxyz-68afb3e96391ca5dea8c46764cf6bd8a33c9ebd7.tar.gz danixxyz-68afb3e96391ca5dea8c46764cf6bd8a33c9ebd7.zip | |
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>
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/header.html | 11 |
1 files changed, 9 insertions, 2 deletions
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" > |