Jämna övergångar av ljus och mörkt läge: Tokens, CSS och Motion
Hur man bygger en ljus/mörkt-tema-omkopplare som respekterar systeminställningen, undviker en blixt vid belastning, utformar inbyggda kontroller och animerar utan att skada tillgängligheten.
Core Takeaway
Bygg teman på semantiska tokens, följ systeminställningen med prefers-color-scheme som standard, låt människor åsidosätta det och ställ in färgschema-egenskapen så att formkontroller och rullningslister matchar. Använd det sparade temat innan sidan renderas för att undvika en blixt. Håll switch-animationen kort, till exempel en snabb övertoning eller en View Transition, och hoppa över den när reducerad rörelse är på.
Börja från systeminställningen
Mediefunktionen prefers-color-scheme talar om för dig om användaren har bett sitt operativsystem om ett ljust eller mörkt tema. Använd den som standard och lägg till en switch i appen som åsidosätter den och kommer ihåg.
Tema med tokens, inte åsidosättanden
Definiera färger som semantiska tokens (yta, text, ram, accent) och ge varje tema sina egna värden, vanligtvis som CSS anpassade egenskaper på rotelementet. Komponenter ändras då aldrig mellan teman; bara tokenvärdena gör det. Detta är samma tre-nivå token-metod som används för designsystem med flera varumärken.
Glöm inte inbyggda kontroller
MDN förklarar att färgschemaegenskapen talar om för webbläsaren vilka scheman ett element stöder, vilket ändrar standardfärgerna för formulärkontroller, rullningslister och andra inbyggda användargränssnitt. Utan den kan en mörk sida visa ljusa vita ingångar och rullningslister.
Undvik blixten vid belastning
Om det sparade temat tillämpas av JavaScript efter att sidan har renderats, ser folk en blixt av fel tema. Använd det så tidigt som möjligt, med ett litet inline-skript i dokumenthuvudet eller ett serverrenderat attribut, innan stilmallen målas.
Animera omkopplaren noggrant
En kort övertoning, runt 150 till 250 millisekunder, gör att förändringen känns avsiktlig. Undvik att ändra varje färgegenskap på varje element, vilket kan vara långsamt på stora sidor; en enstaka ögonblicksbild av visningsövergång är ofta smidigare. Gör själva reglaget tydligt, med en etikett eller verktygstips, och ta bort animeringen när reducerad rörelse är på.
Produktionsimplementeringsutdrag
/* 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);
}Nyckel Principles att komma ihåg
- Standard för prefers-color-scheme; låt folk åsidosätta och komma ihåg det
- Tema med semantiska tokens, inte åsidosättningar per komponent
- Ställ in färgschema så att inbyggda kontroller matchar
- Applicera det sparade temat före första målningen
- Håll switchanimeringen kort och respektera reducerad rörelse
Vanliga frågor
Källor
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
- View Transition API — MDN Web Docs