diff --git a/web/templates/base.html b/web/templates/base.html
index 115563a..241b3c9 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -7,6 +7,23 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="{% static 'app.css' %}">
 
+  {# === THEME SYSTEM (BEGIN) === #}
+  <link rel="stylesheet" href="{% static 'css/theme-base.css' %}">
+  <link id="theme-css" rel="stylesheet"
+        href="{% static 'themes/' %}{{ request.session.theme|default:'midnight' }}.css">
+  <script>
+    // Early apply from localStorage to prevent flash if a user-selected theme exists
+    (function () {
+      try {
+        var stored = localStorage.getItem('theme');
+        if (stored) {
+          document.getElementById('theme-css').href = '{% static "themes/" %}' + stored + '.css';
+        }
+      } catch (e) {}
+    })();
+  </script>
+  {# === THEME SYSTEM (END) === #}
+
   <!-- === PWA additions (BEGIN) === -->
   <link rel="manifest" href="/manifest.webmanifest">
   <meta name="theme-color" content="#f3f6f7">
@@ -261,13 +278,6 @@
         window.addEventListener('blur', close);
       }
     })();
-
-      // Safe to include site-wide; it only adds a class.
-  (function(){
-    if (localStorage.getItem("darkMode") === "true") {
-      document.body.classList.add("dark-mode");
-    }
-  })();
   </script>
   <script>
   // Sticky header: add shadow when page is scrolled