Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS


16 grudnia 2020 / Michał Kortas


Ostatnio bardzo modny ale i za razem praktyczny – z punktu widzenia użytkownika – jest temat udostępniania wszem i wobec ciemnych wersji interfejsu aplikacji webowych. Sam jestem zwolennikiem tego ruchu i z utęsknieniem wypatruję kolejnych usług, które taką formę oferują. Co ciekawe, za pomocą CSS3 i reguł dostępnych w Media Queries Level 5 możemy wykryć pośrednio preferencje systemu operacyjnego (lub bezpośrednio – przeglądarki) użytkownika i łatwo dostosować interfejs własnej aplikacji.

Zbudowałem szybki prototyp strony, która rozpoznaje preferencje użytkownika. Odwiedzając poniższe demo i zmieniając tryb kolorystyczny przeglądarka automatycznie stosuje odpowiednie style CSS.

Zobacz DEMO

Rozpoznawanie preferencji kolorystycznych systemu operacyjnego

Jak można zauważyć, interfejs aplikacji w przeglądarce reaguje natychmiast. Dużo szybciej od interfejsu systemu operacyjnego.

Jak rozpoznać ciemny tryb interfejsu w systemie użytkownika?

Aby zastosować style w przypadku, kiedy użytkownik posiada w systemie (lub / i przeglądarce) aktywowany tryb ciemny, używamy następującego kodu CSS i powiązanych z nim reguł @media.

Powyższe style mają zastosowanie w przypadku aktywnego trybu ciemnego.

Tryb ciemny interfejsu

Tryb ciemny interfejsu

Jak rozpoznać jasny tryb interfejsu w systemie / przeglądarce użytkownika?

W tym przypadku prefers-color-scheme: dark zamieniamy po prostu na prefers-color-scheme: light.

Tryb jasny interfejsu

Tryb jasny interfejsu

Przechwytywanie użytkownika bez preferencji

Osobnymi stylami możemy potraktować również użytkownika bez preferencji kolorystycznych.

Jednak w wielu przypadkach wystarczą standardowe style, które dotyczą interfejsu domyślnego, np. jasnego oraz dodatkowe @media reguły dla trybu ciemnego, czyli tak zwane (chyba tylko przeze mnie 😀) podejście light-first.


Tagi:


4 odpowiedzi na “Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS”

  1. Krzysztof pisze:

    Świetny tekst

  2. SpeX pisze:

    U mnie działało. Ale przez to, iż miałem ustawiony tryb niestandardowy (ciemny dla systemu, jasny dla aplikacji). A ta wartość reguły CSS pobiera preferencje z ustawień aplikacji w systemi, a nie systemu.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.