diff --git a/src/frontend/partials/head.eta.html b/src/frontend/partials/head.eta.html
index 6a178b1..9e3f8c9 100644
--- a/src/frontend/partials/head.eta.html
+++ b/src/frontend/partials/head.eta.html
@@ -11,6 +11,7 @@
+
@@ -20,29 +21,7 @@
-
diff --git a/static/js/handleColorMode.js b/static/js/handleColorMode.js
new file mode 100644
index 0000000..ab3b2e2
--- /dev/null
+++ b/static/js/handleColorMode.js
@@ -0,0 +1,30 @@
+// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the element.
+
+// TODO: Probably migrate theme mode storage to api.
+function updateColorMode() {
+ const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
+ const isDark = currentTheme === 'dark';
+ const isLight = currentTheme === 'light';
+
+ const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
+
+ if (currentTheme === 'auto') {
+ if (prefersLight) {
+ document.documentElement.setAttribute('data-bs-theme', 'light');
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', 'dark');
+ }
+ } else if (isDark) {
+ document.documentElement.setAttribute('data-bs-theme', 'dark');
+ } else if (isLight) {
+ document.documentElement.setAttribute('data-bs-theme', 'light');
+ }
+}
+
+(function () {
+ const mql = window.matchMedia('(prefers-color-scheme: dark)');
+ mql.addEventListener('change', () => {
+ updateColorMode();
+ });
+ updateColorMode();
+})();