Zmienne CSS do przełączania motywów

Własne właściwości CSS (zmienne) zdefiniowane w :root są dostępne globalnie w całym arkuszu stylów. Pełną paletę kolorów — tła, kolory tekstu, powierzchnie i obramowania — definiuje się raz, a następnie odwołuje do niej w całym arkuszu. Takie jedno źródło prawdy sprawia, że przełączanie motywów jest proste.

Po ustawieniu atrybutu data-theme="dark" na elemencie document.documentElement selektor CSS taki jak [data-theme='dark'] nadpisuje zmienne główne wartościami dla ciemnego motywu. Komponenty odwołują się do var(--color-bg) i automatycznie pobierają nowe wartości bez żadnych zmian w kodzie.

Co najmniej należy zdefiniować: --color-bg (tło strony), --color-text (główny tekst), --color-primary (kolor marki), --color-surface (tło karty lub panelu) oraz --color-border (separatory). Spójny zestaw tokenów zapobiega pojawianiu się przypadkowych wartości kolorów w komponentach.

W arkuszu CSS komponentu należy odwoływać się do zmiennych, na przykład za pomocą background: var(--color-bg) i color: var(--color-text). Można również podać wartość zapasową: var(--color-bg, #ffffff). Przeglądarka rozwiązuje zmienną podczas malowania, dlatego jedna klasa działa zarówno dla jasnego, jak i ciemnego motywu.

Do selektora :root należy dodać transition: background-color 200ms, color 200ms. Po zmianie atrybutu data-theme wszystkie elementy korzystające ze zmiennych CSS płynnie przejdą do nowych wartości jednocześnie. Zapewnia to dopracowany efekt bez kodu animacji w JavaScript.

Zarządzanie motywem za pomocą zmiennych CSS jest lepsze niż ustawianie stylów inline z poziomu JavaScriptu. Przeglądarka natywnie obsługuje wszystkie przeliczenia stylów, nie występują dodatkowe ponowne renderowania Reacta wywoływane dla każdego komponentu potomnego z motywem, a kaskada CSS automatycznie obsługuje dziedziczenie. JavaScript musi jedynie przełączać jeden atrybut na elemencie głównym.

Zmienne CSS można połączyć z zapytaniem @media (prefers-color-scheme: dark) jako awaryjnym rozwiązaniem działającym wyłącznie w CSS. Nadpisania dla ciemnego motywu należy zdefiniować w zapytaniu medialnym dodatkowo do selektora data-theme lub zamiast niego. Dzięki temu tryb ciemny działa nawet wtedy, gdy JavaScript nie został jeszcze uruchomiony.

Najbardziej niezawodne podejście łączy oba mechanizmy: zapytanie @media zapewnia domyślne ustawienie systemu, atrybut data-theme umożliwia nadpisanie przez użytkownika za pomocą JavaScriptu. Gdy atrybut jest obecny, ma pierwszeństwo dzięki większej specyficzności; gdy go nie ma, działa zapytanie medialne.

W przypadku obrazów, które źle wyglądają na ciemnym tle, należy użyć elementu HTML picture z elementem potomnym source media="(prefers-color-scheme: dark)". Przeglądarka automatycznie wybierze ciemny wariant. W przypadku ikon SVG w CSS można użyć filter: invert(1) jako szybkiego przybliżenia.

Zmienne CSS można również ograniczyć do pojedynczych komponentów, definiując je na głównym elemencie komponentu zamiast w :root. Umożliwia to stosowanie osobnych motywów komponentów, na przykład paska bocznego z własnym tokenem tła różniącym się od tła strony, przy jednoczesnym poprawnym przełączaniu wraz z globalnym przełącznikiem motywu.

Chrome DevTools wyświetla rozwiązane wartości zmiennych CSS w panelu Styles. Należy kliknąć odwołanie do zmiennej, aby przejść do jej definicji. Ułatwia to sprawdzenie, czy do danego elementu została zastosowana właściwa wartość tokenu dla ciemnego lub jasnego motywu. W panelu można również zmieniać wartości zmiennych na żywo.

Jaki selektor CSS służy do definiowania globalnych własnych właściwości CSS stosowanych w całym dokumencie?

Własne właściwości CSS w :root zapewniają scentralizowany system tokenów dla motywów. Aby natychmiast przełączać motywy, należy przełączać atrybut data-theme na elemencie html. Należy dodać przejścia CSS dla płynnej animacji, używać zapytania medialnego prefers-color-scheme jako awaryjnego rozwiązania działającego wyłącznie w CSS oraz unikać nadpisań stylów JavaScriptu dla poszczególnych komponentów.