Tranziții fluide în modul de lumină și întuneric: jetoane, CSS și mișcare
Cum să construiți un comutator de temă luminoasă/întunecată care respectă setarea sistemului, evită fulgerul la încărcare, stilează comenzile native și anime fără a afecta accesibilitatea.
Core Takeaway
Creați teme pe jetoane semantice, urmați setarea sistemului cu prefers-color-scheme în mod implicit, lăsați-le pe oameni să o înlocuiască și setați proprietatea schemei de culori, astfel încât controalele de formular și barele de defilare să se potrivească. Aplicați tema salvată înainte ca pagina să fie randată pentru a evita un flash. Păstrați animația scurtă a comutatorului, cum ar fi o fade încrucișată rapidă sau o tranziție de vizualizare și omiteți-o când este activată mișcarea redusă.
Începeți de la setarea sistemului
Caracteristica media prefers-color-scheme vă spune dacă utilizatorul și-a cerut sistemului de operare o temă deschisă sau întunecată. Folosiți-l ca implicit și adăugați un comutator în aplicație care îl înlocuiește și este reținut.
Temă cu jetoane, nu suprascrie
Definiți culorile ca simboluri semantice (suprafață, text, chenar, accent) și dați fiecărei teme propriile valori, de obicei ca proprietăți personalizate CSS pe elementul rădăcină. Componentele nu se schimbă niciodată între teme; doar valorile indicative o fac. Aceasta este aceeași abordare cu simboluri pe trei niveluri folosită pentru sistemele de design multi-brand.
Nu uita de controalele native
MDN explică faptul că proprietatea de schemă de culori îi spune browserului ce scheme suportă un element, care schimbă culorile implicite ale controalelor de formular, barelor de defilare și a altor interfețe de utilizare încorporate. Fără aceasta, o pagină întunecată poate afișa intrări și bare de defilare albe strălucitoare.
Evitați blițul la încărcare
Dacă tema salvată este aplicată de JavaScript după randarea paginii, oamenii văd un flash al temei greșite. Aplicați-l cât mai devreme posibil, cu un mic script inline în capul documentului sau cu un atribut redat de server, înainte ca foaia de stil să fie desenată.
Animați comutatorul cu atenție
O scurtă decolorare încrucișată, în jur de 150 până la 250 de milisecunde, face ca schimbarea să pară deliberată. Evitați tranziția fiecărei proprietăți de culoare pe fiecare element, care poate fi lentă pe paginile mari; un singur instantaneu de tranziție de vizualizare este adesea mai fluid. Faceți comutatorul în sine clar, cu o etichetă sau un sfat instrument și eliminați animația când este activată mișcarea redusă.
Fragment de implementare a producției
/* 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);
}Cheie Principles de reținut
- Implicit la prefers-color-scheme; lăsați oamenii să depășească și să-și amintească
- Temă cu simboluri semantice, nu înlocuiri pe componentă
- Setați schema de culori, astfel încât controalele native să se potrivească
- Aplicați tema salvată înainte de prima vopsire
- Păstrați animația scurtă și respectați mișcarea redusă
Întrebări frecvente
Surse
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
- View Transition API — MDN Web Docs