Jak wykryć, czy system operacyjny jest w trybie ciemnym w przeglądarkach?

Podobne do " Jak wykryć, czy OS X jest w trybie ciemnym? " tylko dla przeglądarek.

Czy ktoś znalazł sposób na wykrycie czy system użytkownika jest w nowym trybie ciemnym OS X w Safari / Chrome / Firefox?

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

Author: mikemaccana, 2018-06-13
Source

5 answers

Nowy standard jest zarejestrowany na W3C na poziomie Media Queries 5 .

Uwaga: obecnie dostępne tylko w wersji Safari Technology Preview 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-preference w przypadku, gdy użytkownik nie ma preferencji. Ale polecam po prostu użyć normalnego CSS w tym przypadku i kaskadowo CSS poprawnie.

EDIT (7 grudzień 2018):

[[5]} w wersji Safari Technology Preview 71 ogłoszono przełącznik w Safari, aby ułatwić testowanie. Zrobiłem również stronę testową , aby zobaczyć zachowanie przeglądarki.

Jeśli posiadasz Safari Technology Preview Release 71 możesz aktywować poprzez:

Develop > Experimental Features > Dark Mode obsługa CSS

Następnie, jeśli otworzysz stronę testową i otworzysz Inspektora elementu posiada nową ikonę, aby włączyć tryb ciemny / jasny.

przełącz Tryb ciemny / jasny

EDIT (11 lut 2019): Apple wprowadza nowy Safari 12.1 dark mode

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

Nadchodzące przeglądarki:

    IOS 13 ( wydaje mi się, że zostanie wysłany w przyszłym tygodniu po premierze Apple ' a)]}
  • EdgeHTML 76 (Nie wiem kiedy które zostaną wysłane)

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

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

Moja sugestia brzmiałaby: powinieneś rozważyć wdrożenie trybu ciemnego, ponieważ większość użytkowników może go teraz używać (dla nocnych użytkowników twojej witryny).

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

EDIT (19 lis 2020): Obecnie 88% świata może używać CSS w trybie ciemnym. Źródło: caniuse.com

CSS-framework Tailwind CSS v2. 0 obsługuje tryb ciemny. (wydany 18 listopada 2020)

 215
Author: Davy de Vries,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-19 11:25:19

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";
});
 100
Author: Mark Szabo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-23 19:05:50

jest to obecnie (wrzesień 2018) omawiane w "CSS Working Group Editor Drafts" . Spec został uruchomiony (patrz wyżej), dostępny jako zapytanie o media. coś wylądowało już w Safari, Zobacz też tutaj . Tak więc teoretycznie można to zrobić w Safari/Webkit: 

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

ale wygląda na to, że to jest prywatne . W MDN funkcja CSS media inverted-colors jest wymieniona . Wtyczka: blogowałem o trybie ciemnym tutaj .

 23
Author: Frank Lämmer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-02 13:45:57

Przeszukałem API Mozilli, nie mają żadnych zmiennych odpowiadających kolorowi przeglądarki-windows. 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ą różne dla Chrome i Firefox.

 5
Author: toeffe3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-13 18:30:25

[2]} według Mozilli, oto preferowana metoda od 2020 roku 

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

Dla Safari / Webkit możesz użyć 

@media (prefers-dark-interface) { background: #000; }
 3
Author: Aslam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-08 09:39:51