Automatyczny tryb ciemny z JavaScript

Jedną z najbardziej pożądanych funkcji w aplikacjach jest tryb ciemny. Dla wielu użytkowników tryb ciemny zapewnia bardziej przyjazny dla oka interfejs z mniejszą liczbą białych tonów, które mogą powodować zmęczenie oczu. Tryb ciemny jest również znany z oszczędzania baterii na ekranach AMOLED.

Często projektanci stron internetowych używają funkcji prefers-color-schemeCSS media, aby zapewnić inny motyw, gdy włączony jest tryb ciemny. prefers-color-schemeuzyskuje preferencje użytkownika poprzez ustawienia systemu operacyjnego lub ustawienia agenta użytkownika. Oto prosty przykład:

/* Style rules for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
/* Style rules for light mode */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

const darkMode = window.matchMedia("(prefers-color-scheme:dark)").matches;

Tryb ciemny to niezwykle przydatna funkcja dla większości użytkowników. Skorzystaj z tej matchMedia()metody, aby zapewnić użytkownikom lepsze wrażenia.

Jeśli podobał Ci się ten artykuł, może Ci się również spodobać książka Faraz Kelhini, Modern Asynchronous JavaScript . Do 15 maja 2022 r. możesz użyć kodu promocyjnego fkajs_medium_35 , aby zaoszczędzić 35% na wersji ebook. Kody promocyjne nie obowiązują przy wcześniejszych zakupach.

Artykuły Faraz Kelhini