Plynulé prechody medzi režimami svetla a tmy: žetóny, CSS a pohyb
Ako vytvoriť prepínač svetlej/tmavej témy, ktorý rešpektuje nastavenie systému, vyhýba sa blesku pri načítaní, upravuje natívne ovládacie prvky a animuje bez toho, aby to malo vplyv na dostupnosť.
Core Takeaway
Vytvárajte motívy na sémantických tokenoch, predvolene postupujte podľa systémového nastavenia s prefers-color-scheme, nechajte ho prepísať a nastavte vlastnosť color-scheme tak, aby sa ovládacie prvky formulára a posuvníky zhodovali. Aplikujte uložený motív pred vykreslením stránky, aby ste predišli záblesku. Udržujte animáciu prepínača krátku, napríklad rýchle prelínanie alebo prechod zobrazenia, a preskočte ju, keď je zapnutý znížený pohyb.
Začnite od systémových nastavení
Funkcia preferovanej farebnej schémy médií vám povie, či používateľ požiadal svoj operačný systém o svetlú alebo tmavú tému. Použite ho ako predvolený a pridajte prepínač v aplikácii, ktorý ho prepíše a zapamätá si ho.
Téma s tokenmi, nie prepísaním
Definujte farby ako sémantické znaky (povrch, text, orámovanie, zvýraznenie) a priraďte každej téme vlastné hodnoty, zvyčajne ako vlastné vlastnosti CSS v koreňovom prvku. Komponenty sa potom medzi témami nikdy nemenia; iba tokenové hodnoty. Ide o rovnaký trojvrstvový tokenový prístup, ktorý sa používa pre dizajnové systémy viacerých značiek.
Nezabudnite na natívne ovládacie prvky
MDN vysvetľuje, že vlastnosť color-scheme informuje prehliadač, ktoré schémy prvok podporuje, čím sa menia predvolené farby ovládacích prvkov formulára, posuvníkov a iného vstavaného používateľského rozhrania. Bez nej môže tmavá stránka zobrazovať jasné biele vstupy a posuvníky.
Vyhnite sa blesku pri zaťažení
Ak uloženú tému použije JavaScript po vykreslení stránky, ľudia uvidia záblesk nesprávnej témy. Aplikujte ho čo najskôr, s malým vloženým skriptom v hlavičke dokumentu alebo atribútom vykresleným serverom, ešte pred vyfarbením šablóny so štýlmi.
Opatrne animujte spínač
Krátke prelínanie, približne 150 až 250 milisekúnd, spôsobuje, že zmena pôsobí zámerne. Vyhnite sa prechodu každej vlastnosti farby na každom prvku, čo môže byť na veľkých stránkach pomalé; jedna snímka prechodu zobrazenia je často hladšia. Zvýraznite samotný prepínač pomocou menovky alebo popisku a odstráňte animáciu, keď je zapnutý znížený pohyb.
Snippet implementácie 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);
}Kľúč Principle na zapamätanie
- Predvolená hodnota prefers-color-scheme; nechať ľudí prepísať a zapamätať si to
- Téma so sémantickými tokenmi, nie prepísaním jednotlivých komponentov
- Nastavte farebnú schému tak, aby sa natívne ovládacie prvky zhodovali
- Aplikujte uložený motív pred prvým lakovaním
- Udržujte animáciu prepínača krátku a rešpektujte znížený pohyb
Často kladené otázky
Zdroje
- prefers-color-scheme — Webové dokumenty MDN
- color-scheme — Webové dokumenty MDN
- View Transition API — Webové dokumenty MDN