Płynne przejścia między trybami jasnym i ciemnym: tokeny, CSS i ruch
Jak zbudować przełącznik motywu jasny/ciemny, który uwzględnia ustawienia systemu, pozwala uniknąć flashowania podczas ładowania, stylizuje natywne elementy sterujące i animuje bez szkody dla dostępności.
Rdzeń na wynos
Twórz motywy na tokenach semantycznych, postępuj zgodnie z ustawieniami systemowymi z domyślnym preferowanym schematem kolorów, pozwól innym go zastąpić i ustaw właściwość schematu kolorów tak, aby elementy sterujące formularzy i paski przewijania pasowały. Zastosuj zapisany motyw przed wyrenderowaniem strony, aby uniknąć flashowania. Staraj się, aby animacja przełączania była krótka, np. szybkie przejście lub przejście widoku, i pomiń ją, gdy włączony jest zredukowany ruch.
Zacznij od ustawień systemowych
Funkcja multimediów preferowanych schematów kolorów informuje, czy użytkownik poprosił system operacyjny o jasny czy ciemny motyw. Użyj go jako domyślnego i dodaj przełącznik w aplikacji, który go zastępuje i jest zapamiętywany.
Motyw z tokenami, a nie przesłonięciami
Zdefiniuj kolory jako tokeny semantyczne (powierzchnia, tekst, obramowanie, akcent) i nadaj każdemu motywowi własne wartości, zwykle jako niestandardowe właściwości CSS w elemencie głównym. Komponenty nigdy nie zmieniają się między tematami; robią to tylko wartości tokenów. Jest to to samo podejście oparte na tokenach trójwarstwowych, stosowane w systemach projektowania wielu marek.
Nie zapomnij o rodzimych kontrolach
MDN wyjaśnia, że właściwość color-scheme informuje przeglądarkę, jakie schematy obsługuje dany element, co zmienia domyślne kolory kontrolek formularzy, pasków przewijania i innego wbudowanego interfejsu użytkownika. Bez tego ciemna strona może wyświetlać jasne, białe wejścia i paski przewijania.
Unikaj flashowania pod obciążeniem
Jeśli zapisany motyw zostanie zastosowany przez JavaScript po wyrenderowaniu strony, ludzie zobaczą przebłysk niewłaściwego motywu. Zastosuj go tak wcześnie, jak to możliwe, za pomocą małego skryptu wbudowanego w nagłówku dokumentu lub atrybutu renderowanego przez serwer, przed malowaniem arkusza stylów.
Ostrożnie animuj przełącznik
Krótkie zanikanie, trwające około 150 do 250 milisekund, sprawia wrażenie zamierzonej zmiany. Unikaj przenoszenia każdej właściwości koloru w każdym elemencie, co może działać powoli na dużych stronach; pojedyncza migawka przejścia widoku jest często płynniejsza. Wyczyść sam przełącznik za pomocą etykiety lub podpowiedzi i usuń animację, gdy włączony jest ograniczony ruch.
Fragment wdrożenia produkcyjnego
/* 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);
}Klucz Principles do zapamiętania
- Domyślnie preferowany schemat kolorów; niech ludzie to przemilczą i zapamiętają
- Motyw z tokenami semantycznymi, a nie zastąpienia poszczególnych komponentów
- Ustaw schemat kolorów tak, aby natywne elementy sterujące pasowały
- Zastosuj zapisany motyw przed pierwszym malowaniem
- Staraj się, aby animacja przełączania była krótka i przestrzegaj ograniczonego ruchu
Często zadawane pytania
Źródła
- prefers-color-scheme — Dokumenty internetowe MDN
- color-scheme — Dokumenty internetowe MDN
- View Transition API — Dokumenty internetowe MDN