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

Fix accent color loss on refresh by using injected style tag

Browse Source 
The inline script's style.setProperty values on <html> were being
stripped during Vite's CSS injection. Switch to injecting a <style>
tag with :root vars which persists in the DOM. Restore CSS defaults
as safety fallback. Update useTheme to sync both the style tag and
inline styles when settings load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 20:10:51 +08:00
parent 988dc37b64
commit e7be762198
3 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/index.html
View File

@ -9,24 +9,24 @@
<meta name="mobile-web-app-capable" content="yes" />
<title>UMBRA</title>
<script>
// Apply accent color before React hydrates to prevent FOUC.
// Reads from localStorage cache; falls back to cyan on first visit.
// 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.
(function() {
var s = document.documentElement.style;
var h = '187', s = '85.7%', l = '53.3%';
try {
var c = localStorage.getItem('umbra-accent-color');
if (c) {
var p = JSON.parse(c);
s.setProperty('--accent-h', p.h);
s.setProperty('--accent-s', p.s);
s.setProperty('--accent-l', p.l);
return;
if (p.h) h = p.h;
if (p.s) s = p.s;
if (p.l) l = p.l;
}
} catch(e) {}
// First visit or corrupt cache — apply cyan defaults
s.setProperty('--accent-h', '187');
s.setProperty('--accent-s', '85.7%');
s.setProperty('--accent-l', '53.3%');
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);
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />

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

@ -16,7 +16,7 @@ export function useTheme() {
const { settings } = useSettings();
// Only apply accent color once settings have loaded from the API.
// The inline script in index.html handles the initial paint from localStorage cache.
// The <style id="umbra-accent"> tag in index.html handles initial paint.
// Firing this effect with settings=undefined would overwrite the cache with cyan.
useEffect(() => {
if (!settings) return;
@ -28,9 +28,17 @@ export function useTheme() {
const h = preset.h.toString();
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);
try {
localStorage.setItem('umbra-accent-color', JSON.stringify({ h, s, l }));
} catch {}

9
frontend/src/index.css
View File

@ -26,9 +26,12 @@
--ring: var(--accent-h) var(--accent-s) var(--accent-l);
--radius: 0.5rem;
/* Accent vars are set by the inline script in index.html (from localStorage
cache or cyan fallback). No CSS defaults here — they would race with the
inline script and cause a flash of wrong color on refresh. */
/* Default accent: cyan — safety fallback if inline script fails.
The <style id="umbra-accent"> tag injected by index.html overrides
these (unlayered > @layer base), as does useTheme's inline styles. */
--accent-h: 187;
--accent-s: 85.7%;
--accent-l: 53.3%;
/* Transitions */
--transition-fast: 150ms;