Remove @layer base cyan defaults to eliminate refresh flash
Browser paints cached Vite CSS (@layer base cyan defaults) before the inline script populates the static style tag. Remove the competing cyan defaults — accent vars now come exclusively from the static <style id="umbra-accent"> tag in index.html, which the inline script always populates with the correct color before first paint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4e1b59c0f9
commit
18a2c1314a
@ -26,12 +26,11 @@
|
||||
--ring: var(--accent-h) var(--accent-s) var(--accent-l);
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* 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%;
|
||||
/* Accent vars (--accent-h/s/l) are NOT defined here.
|
||||
They come exclusively from <style id="umbra-accent"> in index.html
|
||||
(populated by inline script from localStorage, fallback cyan).
|
||||
Defining them here causes a cyan flash on refresh because the
|
||||
browser paints cached CSS before the inline script executes. */
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user