diff --git a/app/static/js/scripts.js b/app/static/js/scripts.js index 40a1a6b3..a9bb2ed1 100644 --- a/app/static/js/scripts.js +++ b/app/static/js/scripts.js @@ -1,3 +1,22 @@ +const getStoredTheme = () => localStorage.getItem('theme'); +const setStoredTheme = theme => localStorage.setItem('theme', theme); + +const getPreferredTheme = () => { + const storedTheme = getStoredTheme() + if (storedTheme) { + return storedTheme + } + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' +} + +const setTheme = theme => { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } +} + // fires after DOM is ready for manipulation document.addEventListener("DOMContentLoaded", function () { setupCommunityNameInput(); @@ -7,6 +26,7 @@ document.addEventListener("DOMContentLoaded", function () { setupTimeTracking(); setupMobileNav(); setupLightDark(); + setTheme(getPreferredTheme()); setupKeyboardShortcuts(); setupTopicChooser(); setupConversationChooser(); diff --git a/app/templates/base.html b/app/templates/base.html index aa13c8e1..c5c42b8b 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -52,6 +52,7 @@ + {% block styles -%} {{ bootstrap.load_css() }} @@ -89,28 +90,6 @@ {% if noindex -%} {% endif -%} - {% if preconnect and not low_bandwidth -%} {% endif -%}