From 4e1b59c0f96e9b121ed7caf9ae1e3849ec1682d1 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 20:47:02 +0800
Subject: [PATCH] Use static style tag in HTML source for accent color
 persistence

Vite's initialization strips dynamically created elements from <head>.
Place <style id="umbra-accent"> directly in the HTML source instead of
creating it with createElement. Source-authored elements survive Vite's
head cleanup. The inline script populates it via textContent (XSS-safe).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 3c415c2..1a51cb8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,10 +8,12 @@
     <meta name="theme-color" content="#09090b" />
     <meta name="mobile-web-app-capable" content="yes" />
     <title>UMBRA</title>
+    <!-- Static style tag — survives Vite's head cleanup (unlike dynamically created elements).
+         The inline script below populates it with accent color from localStorage cache. -->
+    <style id="umbra-accent"></style>
     <script>
-      // Inject a <style> tag with !important accent color vars.
-      // Inline style attr gets stripped during page load (unknown cause),
-      // but a <style> tag with !important persists and beats @layer base defaults.
+      // Populate the static style tag with cached accent color before first paint.
+      // Uses textContent (safe from XSS) and !important (beats @layer base defaults).
       (function() {
         var h = '187', s = '85.7%', l = '53.3%';
         try {
@@ -23,10 +25,8 @@
             if (p.l) l = p.l;
           }
         } catch(e) {}
-        var el = document.createElement('style');
-        el.id = 'umbra-accent';
-        el.textContent = ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
-        document.head.appendChild(el);
+        document.getElementById('umbra-accent').textContent =
+          ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
