From 6917a47604dfe9ccab9494e0f7871b6791426e10 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 03:37:54 +0000
Subject: [PATCH] Update web/templates/base.html

---
 web/templates/base.html | 49 +++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 14 deletions(-)
diff --git a/web/templates/base.html b/web/templates/base.html
index b79215f..2cd489b 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -12,14 +12,29 @@
   <link id="theme-css" rel="stylesheet"
         href="{% static 'themes/' %}{{ request.session.theme|default:'classic' }}.css">
   <script>
-    // Early apply from localStorage to prevent flash if a user-selected theme exists
+    // Resolve theme ASAP: localStorage first, else server session fallback.
+    // Then: set data-theme, point the theme CSS, and remember it.
     (function () {
       try {
+        var server = "{{ request.session.theme|default:'classic' }}";
         var stored = localStorage.getItem('theme');
+        var theme  = 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) {
-          document.documentElement.setAttribute('data-theme', stored);
-          document.getElementById('theme-css').href = '{% static "themes/" %}' + stored + '.css';
+          var href = "{% static 'themes/' %}" + stored + ".css";
+          var link = document.getElementById('theme-css');
+          if (link && link.href.indexOf(href) === -1) 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;
       } catch (e) {}
     })();
   </script>
@@ -76,7 +91,6 @@
     /* --- additions for mobile hamburger --- */
     .hamburger { display:none; }
     .mobile-menu[hidden]{ display:none; }
-
     @media (max-width:700px){
       .desktop-nav { display:none; }
       .hamburger{
@@ -115,10 +129,21 @@
   </style>
 </head>
 
-{# Auto-apply 'themed-bg' for Classic so your original gradient shows everywhere (passthrough) #}
-{% with current_theme=request.session.theme|default:'classic' %}
-<body class="{% block body_class %}{% endblock %}{% if current_theme == 'classic' %} themed-bg{% endif %}">
-{% endwith %}
+<body class="{% block body_class %}{% endblock %}">
+  <script>
+    // Apply/Remove the gradient class based on the final resolved theme.
+    (function () {
+      try {
+        var theme = window.__resolvedTheme || document.documentElement.getAttribute('data-theme') || 'classic';
+        if (theme === 'classic') {
+          document.body.classList.add('themed-bg');   // your original gradient class from app.css
+        } else {
+          document.body.classList.remove('themed-bg');
+        }
+      } catch (e) {}
+    })();
+  </script>
+
   <div class="topbar-wrap">
     <div class="topbar">
       <div class="brand">
@@ -200,7 +225,7 @@
 
   <script>
     (function () {
-      /* mobile hamburger */
+      // mobile hamburger
       const btn = document.getElementById('hamburger');
       const menu = document.getElementById('mobileMenu');
       if (btn && menu) {
@@ -215,25 +240,21 @@
         window.matchMedia('(min-width: 701px)').addEventListener('change', () => close());
       }
 
-      /* USER MENU: desktop dropdown */
+      // USER MENU: desktop dropdown
       const userBtn = document.getElementById('userMenuBtn');
       const userMenu = document.getElementById('userMenu');
       if (userBtn && userMenu) {
         const open = () => { userMenu.hidden = false; userBtn.setAttribute('aria-expanded','true'); };
         const close = () => { userMenu.hidden = true; userBtn.setAttribute('aria-expanded','false'); };
-
         userBtn.addEventListener('click', (e) => { e.stopPropagation(); userMenu.hidden ? open() : close(); });
-
         document.addEventListener('click', (e) => {
           if (userMenu.hidden) return;
           if (!userMenu.contains(e.target) && !userBtn.contains(e.target)) close();
         });
         document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
-
         userMenu.addEventListener('click', (e) => {
           if (e.target.closest('a') || e.target.closest('button')) close();
         });
-
         window.addEventListener('blur', close);
       }
     })();
