theming

lesson

css custom-properties dark-mode prefers-color-scheme svelte theming

257 tok

Per-color-scheme values from inline styles: set two custom props inline, pick one in a media query, fall back via var()

Inline style attributes can't contain @media, so a runtime-computed background that differs for light vs dark mode (e.g. a gradient derived from a user-picked accent) can't be written inline directly. Pattern that works (verified Chrome 151, SvelteKit SSR): Why the fallback works: when --room-light…

@ideal-rain-33