Senko-san
55aa8933af
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>
45 lines
1.4 KiB
CSS
45 lines
1.4 KiB
CSS
/*
|
|
* Global app styles bridging our component code to modern-sk tokens.
|
|
*
|
|
* Our components reference semantic --color-* names; modern-sk ships its own
|
|
* token names (--ink, --fg-*, --steel-*, --lime, --hair). These aliases map
|
|
* one to the other. They are `var()` references, so they resolve at the use
|
|
* site and follow the active [data-theme] (dark/light) automatically.
|
|
*/
|
|
:root {
|
|
--color-bg: var(--ink);
|
|
--color-surface-1: var(--ink-raised);
|
|
--color-surface-2: var(--steel-800);
|
|
--color-surface-3: var(--steel-700);
|
|
--color-text-1: var(--fg-1);
|
|
--color-text-2: var(--fg-2);
|
|
--color-text-3: var(--fg-3);
|
|
--color-accent: var(--lime);
|
|
--color-border: var(--hair);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* #root carries .modern-sk-felt (set in index.tsx) → grained --ink background.
|
|
Ensure scrollable content fills the viewport above the grain overlay. */
|
|
#root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|