Plynulé přechody mezi režimy světla a tmy: Tokeny, CSS a Pohyb
Jak vytvořit přepínač světlého/tmavého motivu, který respektuje nastavení systému, vyhýbá se blikání při načítání, stylizuje nativní ovládací prvky a animuje, aniž by to ovlivnilo přístupnost.
Core Takeaway
Vytvářejte motivy na sémantických tokenech, ve výchozím nastavení postupujte podle nastavení systému s prefers-color-scheme, nechte je přepsat a nastavte vlastnost color-scheme tak, aby se ovládací prvky formuláře a posuvníky shodovaly. Aplikujte uložený motiv před vykreslením stránky, abyste předešli záblesku. Udržujte animaci přepínače krátkou, jako je rychlé prolínání nebo přechod zobrazení, a přeskočte ji, když je zapnutý omezený pohyb.
Začněte od nastavení systému
Funkce prefers-color-scheme media vám sdělí, zda uživatel požádal svůj operační systém o světlé nebo tmavé téma. Použijte jej jako výchozí a přidejte přepínač v aplikaci, který jej přepíše a zapamatuje si.
Téma s tokeny, nikoli přepisy
Definujte barvy jako sémantické tokeny (povrch, text, ohraničení, zvýraznění) a přiřaďte každému motivu jeho vlastní hodnoty, obvykle jako uživatelské vlastnosti CSS na kořenovém prvku. Komponenty se pak mezi tématy nikdy nemění; pouze hodnoty tokenu. Jedná se o stejný třívrstvý tokenový přístup používaný pro návrhové systémy pro více značek.
Nezapomeňte na nativní ovládací prvky
MDN vysvětluje, že vlastnost color-scheme sděluje prohlížeči, která schémata prvek podporuje, což mění výchozí barvy ovládacích prvků formuláře, posuvníků a dalšího vestavěného uživatelského rozhraní. Bez něj může tmavá stránka zobrazovat jasně bílé vstupy a posuvníky.
Vyhněte se blesku při zatížení
Pokud uložený motiv použije JavaScript po vykreslení stránky, lidé uvidí záblesk nesprávného motivu. Aplikujte jej co nejdříve pomocí malého vloženého skriptu v hlavičce dokumentu nebo atributu vykresleného serverem, než se šablona stylů vybarví.
Opatrně animujte spínač
Krátké prolínání, přibližně 150 až 250 milisekund, způsobuje, že změna působí záměrně. Vyhněte se přechodu každé vlastnosti barvy na každém prvku, což může být na velkých stránkách pomalé; jeden snímek přechodu pohledu je často hladší. Zjasněte samotný přepínač pomocí štítku nebo popisku a odstraňte animaci, když je zapnutý omezený pohyb.
Fragment implementace výroby
/* 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);
}Klíč Principle k zapamatování
- Výchozí nastavení prefers-color-scheme; nechat lidi přepsat a zapamatovat si to
- Téma se sémantickými tokeny, nikoli přepsáním pro jednotlivé komponenty
- Nastavte barevné schéma tak, aby nativní ovládací prvky odpovídaly
- Aplikujte uložený motiv před prvním malováním
- Udržujte animaci přepínače krátkou a respektujte snížený pohyb
Často kladené otázky
Zdroje
- prefers-color-scheme — Webové dokumenty MDN
- color-scheme — Webové dokumenty MDN
- View Transition API — Webové dokumenty MDN