Detekcja Preferencji Użytkownika — prefers-color-scheme
Jak czytać systemowe preferencje użytkownika za pomocą media query. Respektowanie wyboru użytkownika bez zmuszania go do decyzji.
Czemu to ważne
Większość użytkowników ma ustawioną preferencję trybu ciemnego lub jasnego w swoim systemie operacyjnym. To nie jest wybór, który robi się raz w roku — to codziennie. Kiedy wchodzisz na stronę, która ignoruje ten wybór, czujesz się ignorowany.
Dobrą wiadomością jest, że to wcale nie jest trudne do wdrożenia. Media query `prefers-color-scheme` pozwala Ci przeczytać tę preferencję za pomocą kilku linijek CSS. Nie musisz budować skomplikowanego systemu przełączania motywów — czasami wystarczy po prostu zaakceptować to, co użytkownik już wybrał.
Jak działa prefers-color-scheme
Zamiast sprawdzać czy użytkownik kliknął guzik czy zmienił ustawienia w jakimś panelu kontrolnym Twojej strony, możesz bezpośrednio zapytać system operacyjny. To jest właśnie to, co robi `prefers-color-scheme`.
Media query przyjmuje dwie wartości: `light` i `dark`. Kiedy użytkownik ma włączony tryb ciemny w systemie — czy to Windows, macOS, Android czy iOS — będzie pasować do `dark`. Jeśli ma jasny tryb, pasuje do `light`.
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
@media (prefers-color-scheme: light) {
body {
background-color: #ffffff;
color: #000000;
}
}
Implementacja krok po kroku
To nie jest skomplikowane, ale musisz wiedzieć dokładnie, co robisz.
Zdefiniuj kolory podstawowe
Zamiast hardkodować kolory bezpośrednio w CSS, użyj zmiennych. To pozwoli Ci zmienić wszystko w jednym miejscu. Zdefiniuj zmienne w `:root` lub w media query dla każdego motywu.
Przypisz zmienne do elementów
Zamiast pisać `color: #ffffff`, pisz `color: var(–text-primary)`. Dzięki temu zmienne mogą się zmieniać w zależności od motywu bez zmiany samego CSS.
Przetestuj w systemowych ustawieniach
Nie przełączaj się przez guzik na swojej stronie. Przełącz się w ustawieniach systemu operacyjnego i odśwież stronę. Jeśli wszystko działa, to znaczy że prawidłowo czytasz preferencję.
Zmienne CSS — klucz do elastyczności
Kiedy definiujesz kolory w zmiennych, możesz zmienić wartości dla całego motywu w media query. Zamiast edytować każdy element osobno, zmieniasz wartość zmiennej raz, a wszyscy elementy, które jej używają, się automatycznie zmieniają.
Poza tym zmienne są wartościowe nie tylko dla `prefers-color-scheme`. Jeśli kiedyś zdecydujesz się dodać przycisk przełączania motywu dla użytkowników, którzy chcą go zmienić ręcznie, będziesz już gotowy. Cała infrastruktura będzie już na miejscu.
“Szanowanie preferencji użytkownika to nie dodatek — to podstawa dostępności. Jeśli użytkownik wybrał tryb ciemny, a Ty go zignorował, po prostu pokazałeś, że mu się nie liczysz.”
Praktyczne wskazówki na początek
Zanim zaczniesz wdrażać, pamiętaj o kilku rzeczach. To nie jest trudne, ale są pewne gotchas, na które wszyscy wpadają na początku.
- Kontrast jest kluczowy. Nie wystarczy zmienić kolory — muszą być wystarczająco różne. Tekst musi być czytelny. 4.5:1 to minimum dla zwykłego tekstu.
- Testuj na prawdziwych urządzeniach. Emulator przeglądarki czasami nie wyświetla motywu systemowego prawidłowo. Przełącz się na rzeczywistym telefonie lub komputerze.
- Nie używaj tylko czerni i bieli. Czysty biały na czarnym boli oczy. Użyj odcieni — np. #f5f5f5 na #1a1a1a.
- Obrazy mogą potrzebować dostosowania. Jeśli masz zdjęcie z białym tłem, może wyglądać dziwnie w ciemnym motywie. Rozważ filtry CSS lub inne obrazy.
Podsumowanie
`prefers-color-scheme` to nie zaawansowana technologia — to proste medium query, które czyta to, co użytkownik już wybrał. Nie musisz budować skomplikowanego systemu. Wystarczy kilka linijek CSS i zmienne.
Zaczni od podstaw: zmienne CSS, media query dla ciemnego i jasnego motywu, i testowanie w systemowych ustawieniach. Kiedy to będzie działać, możesz rozbudowywać. Ale nawet ten minimalny system będzie lepszy niż ignorowanie preferencji użytkownika.
To jest jedno z tych rozwiązań, które jest proste do wdrożenia, ale ogromnie wpływa na doświadczenie użytkownika. Osoby z wrażliwością na światło będą Ci wdzięczne.
Informacja edukacyjna: Ten artykuł ma na celu wyjaśnić koncepcje i najlepsze praktyki związane z implementacją prefers-color-scheme. Różne przeglądarki i urządzenia mogą zachowywać się nieco inaczej. Zawsze testuj swoją implementację w rzeczywistych warunkach i na różnych urządzeniach. Rekomendujemy konsultację z dokumentacją MDN i specyfikacją WCAG dla pełnego zrozumienia dostępności.
