From b202ee1a84b95737bcf4d2b395b55b8a46964dc2 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 20:29:53 +0800
Subject: [PATCH] Use style tag with !important for accent color persistence

Inline style attribute on <html> gets stripped during page load.
Switch to injecting a <style id="umbra-accent"> tag with !important
CSS custom properties which persists in the DOM and beats @layer base
defaults. useTheme updates the same style tag when settings load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/index.html            | 14 +++++++-------
 frontend/src/hooks/useTheme.ts | 13 +++++++------
 2 files changed, 14 insertions(+), 13 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index bb83021..3c415c2 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,9 +9,9 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <title>UMBRA</title>
     <script>
-      // Apply accent color with !important inline styles — highest CSS priority.
-      // Beats all stylesheet rules regardless of @layer, specificity, or source order.
-      // useTheme.ts updates these with !important when settings load from the API.
+      // 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.
       (function() {
         var h = '187', s = '85.7%', l = '53.3%';
         try {
@@ -23,10 +23,10 @@
             if (p.l) l = p.l;
           }
         } catch(e) {}
-        var d = document.documentElement.style;
-        d.setProperty('--accent-h', h, 'important');
-        d.setProperty('--accent-s', s, 'important');
-        d.setProperty('--accent-l', l, 'important');
+        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);
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index b1d0590..6b2d794 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -16,8 +16,8 @@ export function useTheme() {
   const { settings } = useSettings();
 
   // Only apply accent color once settings have loaded from the API.
-  // The inline script in index.html handles initial paint from localStorage.
-  // Both use !important inline styles — the highest CSS cascade priority.
+  // Updates the <style id="umbra-accent"> tag injected by index.html.
+  // Uses !important to beat @layer base defaults in the stylesheet.
   useEffect(() => {
     if (!settings) return;
 
@@ -29,10 +29,11 @@ export function useTheme() {
     const s = `${preset.s}%`;
     const l = `${preset.l}%`;
 
-    const d = document.documentElement.style;
-    d.setProperty('--accent-h', h, 'important');
-    d.setProperty('--accent-s', s, 'important');
-    d.setProperty('--accent-l', l, 'important');
+    // Update the persistent <style> tag (inline style attr gets stripped)
+    const el = document.getElementById('umbra-accent');
+    if (el) {
+      el.textContent = `:root{--accent-h:${h} !important;--accent-s:${s} !important;--accent-l:${l} !important}`;
+    }
 
     try {
       localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));
