Glatte Übergänge zwischen hellem und dunklem Modus: Tokens, CSS und Bewegung
So erstellen Sie einen Hell-/Dunkel-Themenschalter, der die Systemeinstellungen berücksichtigt, ein Aufblitzen beim Laden vermeidet, native Steuerelemente gestaltet und animiert, ohne die Zugänglichkeit zu beeinträchtigen.
Kernaussage
Erstellen Sie Designs auf semantischen Token, befolgen Sie standardmäßig die Systemeinstellung mit „preferences-color-scheme“, lassen Sie sie von anderen überschreiben und legen Sie die Eigenschaft „color-scheme“ so fest, dass Formularsteuerelemente und Bildlaufleisten übereinstimmen. Wenden Sie das gespeicherte Design an, bevor die Seite gerendert wird, um einen Blitz zu vermeiden. Halten Sie die Umschaltanimation kurz, z. B. eine schnelle Überblendung oder einen Ansichtsübergang, und überspringen Sie sie, wenn die reduzierte Bewegung aktiviert ist.
Beginnen Sie mit der Systemeinstellung
Die Medienfunktion „Preferences-Color-Schema“ verrät Ihnen, ob der Benutzer sein Betriebssystem nach einem hellen oder dunklen Design gefragt hat. Verwenden Sie es als Standard und fügen Sie einen In-App-Schalter hinzu, der es überschreibt und gespeichert wird.
Thema mit Token, nicht mit Überschreibungen
Definieren Sie Farben als semantische Token (Oberfläche, Text, Rahmen, Akzent) und geben Sie jedem Thema seine eigenen Werte, normalerweise als benutzerdefinierte CSS-Eigenschaften für das Stammelement. Komponenten ändern sich dann nie zwischen den Themen; Nur die Tokenwerte tun dies. Dabei handelt es sich um den gleichen dreistufigen Token-Ansatz, der auch für Mehrmarken-Designsysteme verwendet wird.
Vergessen Sie nicht die nativen Steuerelemente
MDN erklärt, dass die Eigenschaft „color-scheme“ dem Browser mitteilt, welche Schemata ein Element unterstützt, wodurch sich die Standardfarben von Formularsteuerelementen, Bildlaufleisten und anderen integrierten Benutzeroberflächen ändern. Ohne sie können auf einer dunklen Seite hellweiße Eingaben und Bildlaufleisten angezeigt werden.
Vermeiden Sie den Blitz unter Last
Wenn das gespeicherte Design von JavaScript nach dem Rendern der Seite angewendet wird, wird den Benutzern das falsche Design angezeigt. Wenden Sie es so früh wie möglich an, mit einem kleinen Inline-Skript im Dokumentkopf oder einem vom Server gerenderten Attribut, bevor das Stylesheet gezeichnet wird.
Animieren Sie den Schalter sorgfältig
Durch eine kurze Überblendung von etwa 150 bis 250 Millisekunden wirkt der Wechsel bewusst. Vermeiden Sie den Übergang jeder Farbeigenschaft für jedes Element, da dies auf großen Seiten langsam sein kann. Ein einzelner Ansichtsübergangs-Schnappschuss ist oft flüssiger. Machen Sie den Schalter selbst deutlich, mit einer Beschriftung oder einem Tooltip, und entfernen Sie die Animation, wenn die reduzierte Bewegung aktiviert ist.
Produktionsnahes Implementierungsbeispiel
/* 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);
}Wichtige Prinzipien
- Standardmäßig wird das bevorzugte Farbschema verwendet. Lassen Sie die Leute darüber hinweggehen und sich daran erinnern
- Thema mit semantischen Token, nicht komponentenspezifischen Überschreibungen
- Legen Sie das Farbschema so fest, dass die nativen Steuerelemente übereinstimmen
- Wenden Sie das gespeicherte Design vor dem ersten Malen an
- Halten Sie die Wechselanimation kurz und respektieren Sie reduzierte Bewegungen
Häufige Fragen
Quellen
- prefers-color-scheme — MDN Webdokumente
- color-scheme — MDN Webdokumente
- View Transition API — MDN Webdokumente