From fce7405b145b1af3b53a5fa9c1833e9ab57e3de8 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 20:17:04 +0800
Subject: [PATCH] Use !important inline styles for accent color to beat all CSS
 cascade

Both the index.html inline script and useTheme now use setProperty
with 'important' priority flag. This is the highest CSS cascade
priority and cannot be overridden by Vite's stylesheet injection,
@layer rules, or source order. Removes the <style> tag injection
approach which was being overridden.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/index.html            | 14 +++++++-------
 frontend/src/hooks/useTheme.ts | 17 ++++++-----------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 3bc1144..bb83021 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>
-      // 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.
+      // 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.
       (function() {
         var h = '187', s = '85.7%', l = '53.3%';
         try {
@@ -23,10 +23,10 @@
             if (p.l) l = p.l;
           }
         } catch(e) {}
-        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);
+        var d = document.documentElement.style;
+        d.setProperty('--accent-h', h, 'important');
+        d.setProperty('--accent-s', s, 'important');
+        d.setProperty('--accent-l', l, 'important');
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index 743a18f..b1d0590 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 <style id="umbra-accent"> tag in index.html handles initial paint.
-  // Firing this effect with settings=undefined would overwrite the cache with cyan.
+  // The inline script in index.html handles initial paint from localStorage.
+  // Both use !important inline styles — the highest CSS cascade priority.
   useEffect(() => {
     if (!settings) return;
 
@@ -29,15 +29,10 @@ export function useTheme() {
     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);
+    const d = document.documentElement.style;
+    d.setProperty('--accent-h', h, 'important');
+    d.setProperty('--accent-s', s, 'important');
+    d.setProperty('--accent-l', l, 'important');
 
     try {
       localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));