rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Recreate accent style tag if removed during page init

Browse Source 
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>
This commit is contained in:
Kyle 2026-03-12 20:39:37 +08:00
parent b202ee1a84
commit f9359bd78a
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/hooks/useTheme.ts
View File

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