Jak wykryć, czy system operacyjny działa w trybie ciemnym w przeglądarkach?

Podobne do „ Jak wykryć, czy system OS X jest w trybie ciemnym? ” Tylko dla przeglądarek.

Czy ktoś znalazł sposób na wykrycie, czy system użytkownika znajduje się w nowym trybie OS X Dark Mode w Safari / Chrome / Firefox?

Chcielibyśmy zmienić wygląd naszej strony, aby była przyjazna dla trybu ciemnego w oparciu o obecny tryb pracy.

Nowy standard jest zarejestrowany w W3C na poziomie 5 zapytań medialnych .

UWAGA: obecnie dostępne tylko w Safari Technology Preview w wersji 68

W przypadku, gdy preferencje użytkownika to light:

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

W przypadku, gdy preferencje użytkownika to dark:

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

Istnieje również opcja no-preferencew przypadku, gdy użytkownik nie ma preferencji. Ale w takim przypadku zalecam użycie zwykłego CSS i poprawne kaskadowanie CSS.

EDYCJA (7 grudnia 2018):

W Safari Technology Preview Release 71 ogłosili przełącznik w Safari, aby ułatwić testowanie. Zrobiłem również stronę testową, aby zobaczyć zachowanie przeglądarki.

Jeśli masz zainstalowany Safari Technology Preview Release 71 , możesz aktywować za pomocą:

Programowanie> Funkcje eksperymentalne> Obsługa CSS w trybie ciemnym

Następnie, jeśli otworzysz stronę testową i otworzysz inspektora elementów, masz nową ikonę, aby przełączyć tryb ciemny / jasny.

-

EDYCJA (11 lutego 2019 r.): Apple jest dostępny w nowym trybie ciemnym Safari 12.1

-

EDYCJA (5 września 2019 r.): Obecnie 25% świata może używać CSS w trybie ciemnym. Źródło: caniuse.com

Nadchodzące przeglądarki:

• iOS 13 (myślę, że zostanie wysłany w przyszłym tygodniu po Keynote firmy Apple)
• EdgeHTML 76 (nie jestem pewien, kiedy to zostanie wysłane)

-

EDYCJA (5 listopada 2019 r.): Obecnie 74% świata może używać CSS w trybie ciemnym. Źródło: caniuse.com

-

EDYCJA (3 lutego 2020 r.): Microsoft Edge 79 obsługuje tryb ciemny. (wydany 15 stycznia 2020 r.)

-

Moja sugestia byłaby taka: należy rozważyć wdrożenie trybu ciemnego, ponieważ większość użytkowników może go teraz używać (szczególnie w przypadku telefonów komórkowych, czyli oszczędzania baterii).

Uwaga: Wszystkie główne przeglądarki obsługują teraz tryb ciemny, z wyjątkiem: IE, Edge

Jeśli chcesz go wykryć z JS, możesz użyć tego kodu:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Aby obserwować zmiany:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Jest to obecnie (wrzesień 2018) omawiane w „Wersjach roboczych edytora grup roboczych CSS” . Uruchomiono Spec (patrz wyżej), dostępny jako zapytanie o media. Coś już wylądowało w Safari, zobacz też tutaj . Więc teoretycznie możesz to zrobić w Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Ale wydaje się, że to sprawa prywatna . Na MDN funkcja mediów CSS inverted-colorsjest wymienione . Wtyczka: napisałem tutaj o trybie ciemnym .

Przeszukałem API Mozilli, wydaje się, że nie mają żadnych zmiennych odpowiadających kolorowi okien przeglądarki. Chociaż znalazłem stronę, która może ci pomóc: Jak używać stylów systemu operacyjnego w CSS . Pomimo nagłówka artykułu kolory są inne w przeglądarce Chrome i Firefox.

Według Mozilli jest to preferowana metoda od 2020 roku

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}

W przypadku Safari / Webkit możesz użyć

@media (prefers-dark-interface) { background: #000; }