Czym jest prefers-color-scheme?

prefers-color-scheme to funkcja multimedialna CSS, która informuje witryny, czy wolisz ciemny, czy jasny motyw. Przeglądarki odczytują tę informację z ustawień trybu ciemnego systemu Windows, macOS, Linux, Android lub iOS, a witryny zmieniają kolory za pomocą @media (prefers-color-scheme: dark) w CSS lub window.matchMedia("(prefers-color-scheme: dark)") w JavaScript. Jeśli witryna pozostaje jasna, gdy system działa w trybie ciemnym, najpierw sprawdź, co faktycznie zgłasza przeglądarka.

Opis narzędzia

To narzędzie wyświetla motyw systemu w jednym dużym polu: Ciemny z ikoną księżyca lub Jasny z ikoną słońca. Sprawdza, czy w przeglądarce pasuje prefers-color-scheme: dark, i nasłuchuje zmian, więc gdy przełączysz tryb ciemny i jasny w ustawieniach urządzenia, wynik zaktualizuje się od razu, bez ponownego wczytywania strony. Każda wartość inna niż tryb ciemny jest wyświetlana jako Jasny.

Wynik pokazuje, co przeglądarka przekazuje witrynom — nie zawsze odpowiada to ustawieniom systemu. Na przykład Firefox ma ustawienie wyglądu witryn, które pozwala wymusić jasny lub ciemny motyw we wszystkich witrynach, niezależnie od ustawień systemu.

Funkcje

  • Od razu pokazuje, czy motyw jest Ciemny, czy Jasny
  • Aktualizuje się na bieżąco po zmianie motywu systemu
  • Działa w przeglądarce i nie wymaga instalacji