diff options
| -rw-r--r-- | themes/danix-xyz-hacker/assets/js/theme-toggle.js | 37 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/partials/header.html | 13 |
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) --> |