From 46fef4274b84d3eaf4e2435ebb1ce99055244dd9 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 04:07:27 +0000
Subject: [PATCH] Update web/templates/base.html

---
 web/templates/base.html | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)
diff --git a/web/templates/base.html b/web/templates/base.html
index 2cd489b..dbbc113 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -9,32 +9,31 @@
 
   {# === 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:'classic' }}.css">
+  <!-- default to classic; JS below will swap based on storage/session -->
+  <link id="theme-css" rel="stylesheet" href="{% static 'themes/classic.css' %}?v={{ APP_VERSION }}">
   <script>
-    // Resolve theme ASAP: localStorage first, else server session fallback.
-    // Then: set data-theme, point the theme CSS, and remember it.
+    // Pre-resolve every theme to its exact static URL (works with hashed filenames).
+    window.THEME_URLS = {
+      {% for t in available_themes %}
+      "{{ t }}": "{% static 'themes/'|add:t|add:'.css' %}?v={{ APP_VERSION }}"{% if not forloop.last %},{% endif %}
+      {% endfor %}
+    };
+
+    // Pick theme (localStorage > session fallback), set data-theme, and point the CSS href.
     (function () {
       try {
         var server = "{{ request.session.theme|default:'classic' }}";
         var stored = localStorage.getItem('theme');
-        var theme  = stored || server;
+        var theme  = (stored && window.THEME_URLS[stored]) ? stored : server;
 
-        // Mark the document with the final theme
         document.documentElement.setAttribute('data-theme', theme);
 
-        // Point the theme stylesheet (only if localStorage had something)
-        if (stored) {
-          var href = "{% static 'themes/' %}" + stored + ".css";
-          var link = document.getElementById('theme-css');
-          if (link && link.href.indexOf(href) === -1) link.href = href;
-        }
+        var href = window.THEME_URLS[theme] || window.THEME_URLS['classic'];
+        var link = document.getElementById('theme-css');
+        if (link && href) link.href = href;
 
-        // Persist the final theme so next load is consistent
-        localStorage.setItem('theme', theme);
-
-        // Defer body class toggle to right after <body> opens (below).
-        window.__resolvedTheme = theme;
+        try { localStorage.setItem('theme', theme); } catch(e) {}
+        window.__resolvedTheme = theme; // used later to toggle gradient body class
       } catch (e) {}
     })();
   </script>
