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:
Kyle 2026-03-12 21:15:47 +08:00
parent 4e1b59c0f9
commit 18a2c1314a

View File

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