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 }));