Glatt lys og mørk modusoverganger: Tokens, CSS og Motion
Hvordan bygge en lys/mørke-temabryter som respekterer systeminnstillingen, unngår et blits ved belastning, stiler innfødte kontroller og animerer uten å skade tilgjengeligheten.
Kjerne takeaway
Bygg temaer på semantiske tokens, følg systeminnstillingen med prefers-color-scheme som standard, la folk overstyre det, og angi fargeskjemaegenskapen slik at formkontroller og rullefelt samsvarer. Bruk det lagrede temaet før siden gjengis for å unngå blits. Hold bryteranimasjonen kort, for eksempel en rask cross-fade eller en View Transition, og hopp over den når redusert bevegelse er på.
Start fra systeminnstillingen
Mediefunksjonen foretrekker-fargeskjema forteller deg om brukeren har bedt operativsystemet sitt om et lyst eller mørkt tema. Bruk den som standard, og legg til en bryter i appen som overstyrer den og huskes.
Tema med tokens, ikke overstyringer
Definer farger som semantiske symboler (overflate, tekst, kantlinje, aksent) og gi hvert tema sine egne verdier, vanligvis som CSS egendefinerte egenskaper på rotelementet. Komponenter endres da aldri mellom temaer; bare token-verdiene gjør det. Dette er den samme tre-lags token-tilnærmingen som brukes for designsystemer med flere merker.
Ikke glem innfødte kontroller
MDN forklarer at fargeskjemaegenskapen forteller nettleseren hvilke skjemaer et element støtter, noe som endrer standardfargene til skjemakontroller, rullefelt og andre innebygde brukergrensesnitt. Uten den kan en mørk side vise lyse hvite innganger og rullefelt.
Unngå blits ved belastning
Hvis det lagrede temaet brukes av JavaScript etter at siden er gjengitt, ser folk et glimt av feil tema. Bruk det så tidlig som mulig, med et lite innebygd skript i dokumenthodet eller et servergjengitt attributt, før stilarket males.
Animer bryteren nøye
En kort cross-fade, rundt 150 til 250 millisekunder, gjør at endringen føles bevisst. Unngå å bytte hver fargeegenskap på hvert element, som kan være tregt på store sider; et enkelt øyeblikksbilde av visningsovergang er ofte jevnere. Gjør selve bryteren tydelig, med en etikett eller verktøytips, og fjern animasjonen når redusert bevegelse er på.
Snippet for produksjonsimplementering
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Tast Principles å huske
- Standard til foretrekker-farge-skjema; la folk overstyre og huske det
- Tema med semantiske tokens, ikke overstyringer per komponent
- Angi fargeskjemaet slik at de opprinnelige kontrollene samsvarer
- Påfør det lagrede temaet før første maling
- Hold bryteranimasjonen kort og respekter redusert bevegelse
Ofte stilte spørsmål
Kilder
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
- View Transition API — MDN Web Docs