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 -%}