From f9359bd78ae7720a9aecf4d7549279687062b2cb Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 20:39:37 +0800
Subject: [PATCH] Recreate accent style tag if removed during page init

The <style id="umbra-accent"> tag injected by index.html gets removed
during page initialization. useTheme now defensively recreates the tag
if it's missing, ensuring color changes from the settings page work.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/hooks/useTheme.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index 6b2d794..59cf453 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.
-  // Updates the <style id="umbra-accent"> tag injected by index.html.
-  // Uses !important to beat @layer base defaults in the stylesheet.
+  // Creates or updates a <style id="umbra-accent"> tag with !important vars.
+  // The tag may be removed during page init, so always recreate if missing.
   useEffect(() => {
     if (!settings) return;
 
@@ -28,12 +28,15 @@ export function useTheme() {
     const h = preset.h.toString();
     const s = `${preset.s}%`;
     const l = `${preset.l}%`;
+    const css = `:root{--accent-h:${h} !important;--accent-s:${s} !important;--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}`;
+    let el = document.getElementById('umbra-accent');
+    if (!el) {
+      el = document.createElement('style');
+      el.id = 'umbra-accent';
+      document.head.appendChild(el);
     }
+    el.textContent = css;
 
     try {
       localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));