From e7be762198baf2f5bfeff960e3eb01bdfe787172 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 20:10:51 +0800
Subject: [PATCH] Fix accent color loss on refresh by using injected style tag

The inline script's style.setProperty values on <html> were being
stripped during Vite's CSS injection. Switch to injecting a <style>
tag with :root vars which persists in the DOM. Restore CSS defaults
as safety fallback. Update useTheme to sync both the style tag and
inline styles when settings load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/index.html            | 22 +++++++++++-----------
 frontend/src/hooks/useTheme.ts | 10 +++++++++-
 frontend/src/index.css         |  9 ++++++---
 3 files changed, 26 insertions(+), 15 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index b5c9d6f..3bc1144 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,24 +9,24 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <title>UMBRA</title>
     <script>
-      // Apply accent color before React hydrates to prevent FOUC.
-      // Reads from localStorage cache; falls back to cyan on first visit.
+      // Inject a <style> tag with accent color vars before React hydrates.
+      // Uses a style element (not inline style attr) because Vite's CSS
+      // injection strips the html element's style attribute.
       (function() {
-        var s = document.documentElement.style;
+        var h = '187', s = '85.7%', l = '53.3%';
         try {
           var c = localStorage.getItem('umbra-accent-color');
           if (c) {
             var p = JSON.parse(c);
-            s.setProperty('--accent-h', p.h);
-            s.setProperty('--accent-s', p.s);
-            s.setProperty('--accent-l', p.l);
-            return;
+            if (p.h) h = p.h;
+            if (p.s) s = p.s;
+            if (p.l) l = p.l;
           }
         } catch(e) {}
-        // First visit or corrupt cache — apply cyan defaults
-        s.setProperty('--accent-h', '187');
-        s.setProperty('--accent-s', '85.7%');
-        s.setProperty('--accent-l', '53.3%');
+        var el = document.createElement('style');
+        el.id = 'umbra-accent';
+        el.textContent = ':root{--accent-h:' + h + ';--accent-s:' + s + ';--accent-l:' + l + '}';
+        document.head.appendChild(el);
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index e3445ce..743a18f 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -16,7 +16,7 @@ export function useTheme() {
   const { settings } = useSettings();
 
   // Only apply accent color once settings have loaded from the API.
-  // The inline script in index.html handles the initial paint from localStorage cache.
+  // The <style id="umbra-accent"> tag in index.html handles initial paint.
   // Firing this effect with settings=undefined would overwrite the cache with cyan.
   useEffect(() => {
     if (!settings) return;
@@ -28,9 +28,17 @@ export function useTheme() {
     const h = preset.h.toString();
     const s = `${preset.s}%`;
     const l = `${preset.l}%`;
+
+    // Update the injected <style> tag (survives Vite CSS injection, unlike inline styles)
+    const el = document.getElementById('umbra-accent');
+    if (el) {
+      el.textContent = `:root{--accent-h:${h};--accent-s:${s};--accent-l:${l}}`;
+    }
+    // Also set inline styles as a belt-and-suspenders fallback
     document.documentElement.style.setProperty('--accent-h', h);
     document.documentElement.style.setProperty('--accent-s', s);
     document.documentElement.style.setProperty('--accent-l', l);
+
     try {
       localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));
     } catch {}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6b58c1a..c7eaa7d 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -26,9 +26,12 @@
     --ring: var(--accent-h) var(--accent-s) var(--accent-l);
     --radius: 0.5rem;
 
-    /* Accent vars are set by the inline script in index.html (from localStorage
-       cache or cyan fallback). No CSS defaults here — they would race with the
-       inline script and cause a flash of wrong color on refresh. */
+    /* Default accent: cyan — safety fallback if inline script fails.
+       The <style id="umbra-accent"> tag injected by index.html overrides
+       these (unlayered > @layer base), as does useTheme's inline styles. */
+    --accent-h: 187;
+    --accent-s: 85.7%;
+    --accent-l: 53.3%;
 
     /* Transitions */
     --transition-fast: 150ms;
