diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js index 94ffab99..1b552911 100644 --- a/app/static/js/scripts.js +++ b/app/static/js/scripts.js @@ -231,16 +231,39 @@ function setupMobileNav() { } function setupLightDark() { - const elem = document.getElementById('light_mode'); + const elem = document.getElementById('color_mode'); + const icon = document.getElementById('color_mode_icon'); + + const showActiveTheme = (theme) => { + if (theme === 'dark') { + elem.setAttribute('aria-label', 'Light mode'); + elem.setAttribute('title', 'Light mode'); + elem.setAttribute('data-bs-theme-value', 'light'); + icon.classList.remove('fe-moon'); + icon.classList.add('fe-sun'); + } else { + elem.setAttribute('aria-label', 'Dark mode'); + elem.setAttribute('title', 'Dark mode'); + elem.setAttribute('data-bs-theme-value', 'dark'); + icon.classList.remove('fe-sun'); + icon.classList.add('fe-moon'); + } + }; + elem.addEventListener("click", function(event) { - setTheme('light') - setStoredTheme('light') - }); - const elem2 = document.getElementById('dark_mode'); - elem2.addEventListener("click", function(event) { - setTheme('dark') - setStoredTheme('dark') + const theme = elem.getAttribute('data-bs-theme-value'); + setStoredTheme(theme); + setTheme(theme); + showActiveTheme(theme); }); + + var preferredTheme = getStoredTheme(); + if (!preferredTheme || (preferredTheme !== 'light' && preferredTheme !== 'dark')) { + preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + //setTheme(preferredTheme); + icon.classList.remove('fe-eye'); + showActiveTheme(preferredTheme); } function toggleClass(elementId, className) { diff --git a/app/templates/base.html b/app/templates/base.html index 4070cce7..a63781d4 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -260,8 +260,7 @@ {% endif %} - - +