Glatte overgange mellem lys og mørk tilstand: Tokens, CSS og Motion
Hvordan man bygger en lys/mørke-tema-kontakt, der respekterer systemindstillingerne, undgår et blitz ved belastning, stiler indbyggede kontroller og animerer uden at skade tilgængeligheden.
Core Takeaway
Byg temaer på semantiske tokens, følg systemindstillingen med foretrækker-farve-skema som standard, lad folk tilsidesætte det, og indstil farveskema-egenskaben, så formkontroller og rullepaneler matcher. Anvend det gemte tema, før siden gengives for at undgå et flash. Hold switch-animationen kort, såsom en hurtig cross-fade eller en View Transition, og spring den over, når reduceret bevægelse er aktiveret.
Start fra systemindstillingen
Mediefunktionen foretrækker-farveskema fortæller dig, om brugeren har bedt sit operativsystem om et lyst eller mørkt tema. Brug den som standard, og tilføj en kontakt i appen, der tilsidesætter den og huskes.
Tema med tokens, ikke tilsidesættelser
Definer farver som semantiske tokens (overflade, tekst, kant, accent) og giv hvert tema sine egne værdier, normalt som CSS brugerdefinerede egenskaber på rodelementet. Komponenter skifter så aldrig mellem temaer; kun tokenværdierne gør. Dette er den samme tre-lags token-tilgang, der bruges til multi-brand designsystemer.
Glem ikke native kontroller
MDN forklarer, at farveskemaegenskaben fortæller browseren, hvilke skemaer et element understøtter, hvilket ændrer standardfarverne for formularkontroller, rullepaneler og andre indbyggede brugergrænseflader. Uden det kan en mørk side vise lyse hvide input og rullepaneler.
Undgå blitzen ved belastning
Hvis det gemte tema anvendes af JavaScript efter sidens gengivelse, ser folk et glimt af det forkerte tema. Anvend det så tidligt som muligt, med et lille indlejret script i dokumenthovedet eller en servergengivet attribut, før typografiarket males.
Animer kontakten omhyggeligt
En kort cross-fade, omkring 150 til 250 millisekunder, får ændringen til at føles bevidst. Undgå at skifte hver farveegenskab på hvert element, hvilket kan være langsomt på store sider; et enkelt View Transition-snapshot er ofte mere jævnt. Gør selve kontakten tydelig med en etiket eller værktøjstip, og fjern animationen, når reduceret bevægelse er aktiveret.
Snippet til produktionsimplementering
/* 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 for at huske
- Standard til foretrækker-farve-skema; lad folk tilsidesætte og huske det
- Tema med semantiske tokens, ikke tilsidesættelser pr. komponent
- Indstil farveskema, så native kontroller matcher
- Påfør det gemte tema før første maling
- Hold switch-animationen kort og respekter reduceret bevægelse
Ofte stillede spørgsmål
Kilder
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
- View Transition API — MDN Web Docs