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

150

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.

funkju
źródło
1
O ile wiem, nie ma zapytania o media CSS dla Safari w celu wykrycia trybu jasnego lub ciemnego, ale Safari definitywnie obsługuje ciemne widżety na stronach HTML. Pomocne może być zgłoszenie tego radaru.
mschmidt
Mnie nie hiurt, ale po Stackoverflow wprowadzony tryb ciemnej I google jak one wykonywane w trybie „System” i natknęliśmy się na to pytanie. Spodziewam się
dużego

Odpowiedzi:

197

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.

przełącz 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

Davy de Vries
źródło
2
Właśnie to przetestowałem. Jeśli zmienisz motyw w ustawieniach systemu Mac OS, musisz ponownie uruchomić przeglądarkę. Szkoda, że ​​nie jest synchronizowany w locie.
Herman Starikov
3
@HermanStarikov Opublikowałem aktualizację na ten temat, który opisujesz. Dzięki nowemu Safari Technology Preview Release 71 możesz przełączać się w czasie rzeczywistym.
Davy de Vries
Ładny! Zrobiłem małą demonstrację tego, jak wyglądałby motyw z bootstrapem: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov
2
Czy istnieje sposób na wykrycie tego w JavaScript?
Akash Kava
7
@AkashKava Przeszukałem go w Google, tak, jest to możliwe, jeśli użyjesz czegoś takiego: window.matchMedia("(prefers-color-scheme: dark)").matchesJeśli będę miał trochę wolnego czasu, dodam do mojej odpowiedzi pełne rozwiązanie javascript.
Davy de Vries
87

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";
});
Mark Szabo
źródło
Cześć! To działa świetnie. Jestem jednak ciekawy - jak dokładnie działa ta składnia?
Stormblessed
3
@Stormblessed najpierw sprawdzi, czy przeglądarka obsługuje, matchMediaa następnie spróbuje dopasować prefers-color-scheme: darkciąg. Jeśli pasuje, jesteśmy w trybie ciemnym.
Mark Szabo
Z nowym operatorem Elvisa można to zapisać jakoif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo
och, to ma sens! Składnia z .matches wyglądała tak, jakby dokonywała porównania między pierwszą rzeczą a drugą lub czymś w tym rodzaju. Dzięki!
Stormblessed
Powinna być zaznaczona odpowiedź.
podperson
22

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 .

Frank Lämmer
źródło
2
Nie używaj inverted-colorsdo wykrywania trybu ciemnego. Po pierwsze, to nie zadziała. Po drugie, służy do ułatwienia dostępu, a nie estetyki. Niektórzy użytkownicy używają trybu odwróconego, aby zwiększyć kontrast ekranu, co jest typowe dla osób z wadami wzroku. Nie zmieniaj wyglądu swojej witryny, inverted-colorsponieważ w najlepszym przypadku nie będzie ona działać tak, jak chcesz, aw najgorszym może to frustrować tych użytkowników.
Qix - MONICA została źle potraktowana
3

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; }
Aslam
źródło