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ć preferencje systemu operacyjnego użytkownika i łatwo dostosować interfejs własnej aplikacji.

Zbudowałem szybki prototyp strony, która rozpoznaje preferencje systemu 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 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 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:


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

  1. Krzysztof pisze:

    Świetny tekst

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *