Wie erkenne ich, ob sich das Betriebssystem in Browsern im dunklen Modus befindet?

Ähnlich wie " So erkennen Sie, ob sich OS X im Dunkelmodus befindet? " Nur für Browser.

Hat jemand herausgefunden, ob es eine Möglichkeit gibt, festzustellen, ob sich das System des Benutzers im neuen OS X Dark-Modus in Safari / Chrome / Firefox befindet?

Wir möchten das Design unserer Website so ändern, dass es auf der Grundlage des aktuellen Betriebsmodus für den Dunkelmodus geeignet ist.

Der neue Standard ist auf W3C in Media Queries Level 5 registriert .

HINWEIS: Derzeit nur in Safari Technology Preview Release 68 verfügbar

Falls die Benutzerpräferenz lautet light:

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

Falls die Benutzerpräferenz lautet dark:

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

Es gibt auch die Option no-preferencefür den Fall, dass ein Benutzer keine Präferenz hat. Ich empfehle Ihnen jedoch, in diesem Fall nur normales CSS zu verwenden und Ihr CSS korrekt zu kaskadieren.

EDIT (7. Dezember 2018):

In Safari Technology Preview Release 71 wurde ein Kippschalter in Safari angekündigt, um das Testen zu vereinfachen. Ich habe auch eine Testseite erstellt , um das Verhalten des Browsers zu sehen.

Wenn Sie Safari Technology Preview Release 71 installiert haben, können Sie Folgendes aktivieren:

Entwickeln> Experimentelle Funktionen> CSS-Unterstützung im Dunklen Modus

Wenn Sie dann die Testseite öffnen und den Elementinspektor öffnen, haben Sie ein neues Symbol, um den Dunkel / Hell-Modus umzuschalten.

- -

EDIT (11. Februar 2019): Apple - Schiffe in der neuen Safari 12.1 dunklen Modus

- -

BEARBEITEN (5. September 2019): Derzeit können 25% der Welt CSS im dunklen Modus verwenden. Quelle: caniuse.com

Kommende Browser:

• iOS 13 (Ich denke, es wird nächste Woche nach Apples Keynote ausgeliefert)
• EdgeHTML 76 (nicht sicher, wann das ausgeliefert wird)

- -

BEARBEITEN (5. November 2019): Derzeit können 74% der Welt CSS im dunklen Modus verwenden. Quelle: caniuse.com

- -

BEARBEITEN (3. Februar 2020): Microsoft Edge 79 unterstützt den Dunkelmodus. (veröffentlicht am 15. Januar 2020)

- -

Mein Vorschlag wäre: Sie sollten in Betracht ziehen, den Dunkelmodus zu implementieren, da die meisten Benutzer ihn jetzt verwenden können (insbesondere für mobile Geräte, auch bekannt als Batteriesparen).

Hinweis: Alle gängigen Browser unterstützen jetzt den Dunkelmodus, außer: IE, Edge

Wenn Sie es von JS erkennen möchten, können Sie diesen Code verwenden:

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

So achten Sie auf Änderungen:

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

Dies wird derzeit (September 2018) in "CSS Working Group Editor Drafts" diskutiert . Spec wurde gestartet (siehe oben) und ist als Medienabfrage verfügbar. Etwas hat sich bereits in Safari gelandet, siehe auch hier . Theoretisch können Sie dies in Safari / Webkit tun:

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

Aber es scheint, dass dies privat ist . Auf MDN eine CSS - Media - Funktion inverted-colorswird erwähnt . Plug: Ich habe hier über den dunklen Modus gebloggt .

Ich habe die Mozilla-API durchsucht, sie scheinen keine Variablen zu haben, die der Farbe des Browserfensters entsprechen. Obwohl ich eine Seite gefunden habe, die Ihnen helfen könnte: So verwenden Sie Betriebssystemstile in CSS . Trotz der Artikelüberschrift unterscheiden sich die Farben für Chrome und Firefox.

Laut Mozilla ist hier die bevorzugte Methode ab September 2019

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