Vloeiende overgangen in lichte en donkere modus: tokens, CSS en beweging
Hoe je een licht/donker-themaschakelaar kunt bouwen die de systeeminstellingen respecteert, flitsen bij het laden vermijdt, native bedieningselementen en animaties vormgeeft zonder de toegankelijkheid te schaden.
Kern afhaalmaaltijd
Bouw thema's op semantische tokens, volg de systeeminstelling standaard met voorkeuren-kleurenschema, laat mensen deze overschrijven en stel de eigenschap kleurenschema zo in dat formulierbesturingselementen en schuifbalken overeenkomen. Pas het opgeslagen thema toe voordat de pagina wordt weergegeven om flitsen te voorkomen. Houd de schakelaaranimatie kort, zoals een snelle cross-fade of een weergaveovergang, en sla deze over als verminderde beweging is ingeschakeld.
Begin vanaf de systeeminstelling
De mediafunctie voor voorkeurskleurenschema vertelt u of de gebruiker zijn besturingssysteem om een licht of donker thema heeft gevraagd. Gebruik het als standaard en voeg een in-app-schakelaar toe die deze overschrijft en wordt onthouden.
Thema met tokens, geen overschrijvingen
Definieer kleuren als semantische tokens (oppervlak, tekst, rand, accent) en geef elk thema zijn eigen waarden, meestal als aangepaste CSS-eigenschappen voor het hoofdelement. Componenten veranderen dan nooit tussen thema's; alleen de tokenwaarden doen dat. Dit is dezelfde tokenbenadering met drie niveaus die wordt gebruikt voor ontwerpsystemen met meerdere merken.
Vergeet de native besturingselementen niet
MDN legt uit dat de kleurschema-eigenschap de browser vertelt welke schema's een element ondersteunt, waardoor de standaardkleuren van formulierbesturingselementen, schuifbalken en andere ingebouwde gebruikersinterfaces worden gewijzigd. Zonder dit kan een donkere pagina helderwitte invoer en schuifbalken weergeven.
Vermijd de flits bij belasting
Als het opgeslagen thema door JavaScript wordt toegepast nadat de pagina is weergegeven, zien mensen een flits van het verkeerde thema. Pas het zo vroeg mogelijk toe, met een klein inline-script in de documentkop of een door de server weergegeven attribuut, voordat het stylesheet wordt weergegeven.
Animeer de schakelaar zorgvuldig
Een korte cross-fade, ongeveer 150 tot 250 milliseconden, zorgt ervoor dat de verandering opzettelijk aanvoelt. Vermijd het overzetten van elke kleureigenschap op elk element, wat op grote pagina's traag kan zijn; een enkele View Transition-snapshot is vaak vloeiender. Maak de schakelaar zelf duidelijk, met een label of tooltip, en verwijder de animatie wanneer verminderde beweging is ingeschakeld.
Productie-implementatiefragment
/* 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);
}Toets Principles in om te onthouden
- Standaard ingesteld op voorkeurskleurenschema; laat mensen het negeren en onthouden
- Thema met semantische tokens, geen overschrijvingen per component
- Stel het kleurenschema zo in dat de oorspronkelijke besturingselementen overeenkomen
- Pas het opgeslagen thema toe voordat u voor het eerst gaat schilderen
- Houd de schakelaaranimatie kort en respecteer de beperkte beweging
Veelgestelde vragen
Bronnen
- prefers-color-scheme — MDN Webdocumenten
- color-scheme — MDN Webdocumenten
- View Transition API — MDN Webdocumenten