From 19b91eb9e4fed3dd66c7f8d6119d094c1c0d1698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 17 Feb 2026 20:12:45 +0100 Subject: [PATCH] fix(theme-toggle): Implement proper sun/moon icons and JS toggling --- assets/js/main.js | 22 +++++++++++++++++++++- partials/header.hbs | 9 ++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/assets/js/main.js b/assets/js/main.js index 49a50a1..7eba9c8 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -49,14 +49,33 @@ document.addEventListener('DOMContentLoaded', () => { // Theme Switcher const themeToggle = document.getElementById('theme-toggle'); - // const htmlElement = document.documentElement; // Already defined above + const sunIcon = document.getElementById('theme-toggle-sun-icon'); + const moonIcon = document.getElementById('theme-toggle-moon-icon'); + + const setThemeIcons = (theme) => { + if (sunIcon && moonIcon) { + if (theme === 'dark') { + sunIcon.classList.remove('hidden'); + moonIcon.classList.add('hidden'); + } else { + sunIcon.classList.add('hidden'); + moonIcon.classList.remove('hidden'); + } + } + }; const currentTheme = localStorage.getItem('theme'); if (currentTheme) { htmlElement.setAttribute('data-theme', currentTheme); + setThemeIcons(currentTheme); } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { // Default to light theme if system preference is light htmlElement.setAttribute('data-theme', 'light'); + setThemeIcons('light'); + } else { + // Default to dark theme if no preference + htmlElement.setAttribute('data-theme', 'dark'); + setThemeIcons('dark'); } if (themeToggle) { @@ -64,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => { let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; htmlElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); + setThemeIcons(newTheme); }); } diff --git a/partials/header.hbs b/partials/header.hbs index 6947d32..f5a6ff8 100644 --- a/partials/header.hbs +++ b/partials/header.hbs @@ -7,9 +7,12 @@