Wykrywanie schematu kolorów systemu

Zapytanie medialne CSS prefers-color-scheme wykrywa, czy użytkownik skonfigurował system operacyjny tak, aby używał ciemnego lub jasnego motywu kolorystycznego. Przyjmuje ono dwie wartości: dark i light. To ustawienie jest określane na poziomie systemu operacyjnego w ustawieniach systemowych, a nie w przeglądarce.

Ciemne style można zastosować wyłącznie w CSS za pomocą @media (prefers-color-scheme: dark) { ... }. Wewnątrz tego bloku należy nadpisać kolory, tła i obramowania, dostosowując je do ciemnej palety. To podejście nie wymaga JavaScriptu i działa nawet przed zamontowaniem Reacta.

W JavaScript wywołanie window.matchMedia('(prefers-color-scheme: dark)') zwraca obiekt MediaQueryList. Można go użyć do programowego odczytania bieżącego ustawienia systemu wewnątrz hooków Reacta lub programów obsługi zdarzeń. Stanowi on połączenie między zapytaniami medialnymi CSS a logiką JavaScript.

Obiekt MediaQueryList ma właściwość matches, która zwraca wartość logiczną. Jeśli matches ma wartość true, system działa w trybie ciemnym; jeśli ma wartość false, działa w trybie jasnym. Zwykle odczytuje się tę wartość raz podczas montowania komponentu, aby zainicjować stan motywu.

Użytkownicy mogą w dowolnym momencie zmienić schemat kolorów systemu operacyjnego. Aby dynamicznie reagować na takie zmiany, należy wywołać mediaQuery.addEventListener('change', handler), gdzie handler otrzymuje zaktualizowany obiekt MediaQueryListEvent. Obiekt zdarzenia również ma właściwość logiczną matches, która odzwierciedla nowe ustawienie.

Dobrym podejściem jest utworzenie własnego hooka za pomocą useSyncExternalStore. Hook subskrybuje mediaQuery.addEventListener i udostępnia funkcję migawki zwracającą mediaQuery.matches. Dzięki temu hook pozostaje zsynchronizowany z zewnętrznym API przeglądarki bez ręcznego zarządzania stanem.

Po odmontowaniu komponentu należy usunąć odbiornik zdarzeń, aby uniknąć wycieków pamięci. W funkcji sprzątającej useEffect należy wywołać mediaQuery.removeEventListener('change', handler). W przypadku useSyncExternalStore funkcja subskrypcji musi zwracać funkcję usuwającą subskrypcję, która wykonuje tę samą operację.

Ustawienie systemowe to wartość zgłaszana przez system operacyjny. Użytkownicy często chcą jednak niezależnie nadpisać motyw aplikacji, na przykład pozostawić aplikację w trybie jasnym, gdy system działa w trybie ciemnym. Architektura powinna rozróżniać domyślne ustawienie systemu od jawnego nadpisania przez użytkownika, przechowywanego w localStorage.

Chrome DevTools umożliwia emulowanie ustawień schematu kolorów bez zmiany ustawień systemu operacyjnego. Należy otworzyć DevTools, przejść do karty Rendering i znaleźć listę rozwijaną „Emulate CSS media feature prefers-color-scheme”. Jest to niezwykle przydatne podczas szybkiego testowania obu motywów w trakcie developmentu.

Dobra implementacja trybu ciemnego odczytuje ustawienie systemowe jako domyślny punkt wyjścia i stosuje je natychmiast. W ten sposób respektuje ustawienie dostępności użytkownika. Dopiero po jawnym przełączeniu motywu w aplikacji należy zapisać i zastosować inne nadpisanie.

Po stronie serwera window.matchMedia nie istnieje. W przypadku renderowania po stronie serwera przed wywołaniem matchMedia należy sprawdzić warunek typeof window !== 'undefined'. W aplikacjach SSR należy zamiast tego odczytywać preferencję użytkownika z pliku cookie lub nagłówka HTTP, aby uniknąć niezgodności podczas hydratacji.

Jaka właściwość obiektu MediaQueryList informuje, czy zapytanie medialne obecnie pasuje?

Zapytanie medialne prefers-color-scheme udostępnia preferencję kolorów systemu operacyjnego zarówno w CSS, jak i w JavaScript. Należy używać window.matchMedia do odczytywania zmian i nasłuchiwania na nie, zawsze usuwać odbiorniki zdarzeń oraz rozróżniać ustawienia domyślne systemu od nadpisań użytkownika. Emulowanie ustawień w Chrome DevTools przyspiesza testowanie obu motywów.