diff --git a/static/js/base.js b/static/js/base.js
index e69de29bb..0ca1a2b6c 100644
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -0,0 +1,22 @@
+// From https://albertoroura.com/building-a-theme-switcher-for-bootstrap/
+
+function setTheme (mode = 'auto') {
+ const userMode = localStorage.getItem('bs-theme');
+ const sysMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+ const useSystem = mode === 'system' || (!userMode && mode === 'auto');
+ const modeChosen = useSystem ? 'system' : mode === 'dark' || mode === 'light' ? mode : userMode;
+
+ if (useSystem) {
+ localStorage.removeItem('bs-theme');
+ } else {
+ localStorage.setItem('bs-theme', modeChosen);
+ }
+
+ document.documentElement.setAttribute('data-bs-theme', useSystem ? (sysMode ? 'light' : 'dark') : modeChosen);
+ document.querySelectorAll('.mode-switch .btn').forEach(e => e.classList.remove('text-body'));
+ document.getElementById(modeChosen).classList.add('text-body');
+}
+
+setTheme();
+document.querySelectorAll('.mode-switch .btn').forEach(e => e.addEventListener('click', () => setTheme(e.id)));
+window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => setTheme());
\ No newline at end of file
diff --git a/templates/_base.html b/templates/_base.html
index 81a71401a..21ec88bef 100644
--- a/templates/_base.html
+++ b/templates/_base.html
@@ -1,6 +1,6 @@
{% load static %}
-
+
@@ -15,6 +15,7 @@
+
{% endblock %}
@@ -56,7 +57,13 @@
- {% else %}
+ {% endif %}
+
+
+
+
+
+ {% if not user.is_authenticated %}