fix(theme): kill flash of white on dark-themed load
The app painted white until <ThemeProvider> mounted and set data-theme, then snapped to the dark theme. Two fixes: - Inline head script (rsbuild html.tags) sets data-theme before first paint, mirroring modern-sk's exact logic (localStorage 'modern-sk-theme' || 'dark') so there's no second flip when the provider mounts. Inline = zero round-trips. - body now paints var(--color-bg) so the themed background shows before React mounts #root and layers the felt grain on top. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -28,6 +28,11 @@ body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--fg-1);
|
||||
/* Paint the themed background immediately. The inline theme script in
|
||||
index.html (see rsbuild.config.ts) sets [data-theme] before first paint, so
|
||||
--color-bg resolves to the right value here before React mounts #root and
|
||||
layers the .modern-sk-felt grain on top — no flash of white. */
|
||||
background: var(--color-bg);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user