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

138

Ä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.

Funkju
quelle
1
Soweit ich weiß, gibt es für Safari keine CSS-Medienabfrage, um den Hell- oder Dunkelmodus zu erkennen, aber Safari unterstützt definitiv dunkle Widgets in HTML-Seiten. Es kann hilfreich sein, ein Radar dafür einzureichen.
Mschmidt
Sie hiurt mich nicht, aber nach dem Stackoverflow den dunklen Modus eingeführt ich gegoogelt , wie sie das „System“ implementiert und auf diese Frage gestolpert. Ich erwarte viel Verkehr auf diesem :-)
usr-local-ΕΨΗΕΛΩΝ

Antworten:

177

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.

Dunkel / Hell-Modus umschalten

- -

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

Davy de Vries
quelle
2
Habe es gerade getestet. Wenn Sie das Thema in Ihren Mac OS-Einstellungen ändern, müssen Sie den Browser neu starten. Schade, dass es nicht sofort synchronisiert wird.
Herman Starikov
2
@HermanStarikov Ich habe ein Update zu diesem von Ihnen beschriebenen Problem veröffentlicht. Mit der neuen Safari Technology Preview Release 71 können Sie in Echtzeit umschalten.
Davy de Vries
Nett! Ich habe eine kleine Demo gemacht, wie das Thema mit Bootstrap aussehen würde: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov
2
Gibt es eine Möglichkeit, dies in JavaScript zu erkennen?
Akash Kava
7
@AkashKava Ich habe herum gegoogelt, ja, es ist möglich, wenn Sie so etwas verwenden: window.matchMedia("(prefers-color-scheme: dark)").matchesWenn ich etwas Freizeit habe, werde ich meiner Antwort eine vollständige Javascript-Lösung hinzufügen.
Davy de Vries
66

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";
});
Mark Szabo
quelle
Hallo! Das funktioniert super. Ich bin allerdings neugierig - wie genau funktioniert diese Syntax?
Stormblessed
1
@Stormblessed prüft zuerst, ob der Browser dies unterstützt, matchMediaund versucht dann, mit der prefers-color-scheme: darkZeichenfolge übereinzustimmen . Wenn es passt, sind wir im dunklen Modus.
Mark Szabo
Mit dem neuen Elvis-Operator kann dies geschrieben werden alsif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo
Oh, das macht Sinn! Die Syntax mit .matches sah so aus, als würde der Vergleich zwischen dem ersten und dem zweiten oder so durchgeführt. Vielen Dank!
Stormblessed
Sollte die überprüfte Antwort sein.
Podperson
22

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 .

Frank Lämmer
quelle
2

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;
  }
}
Aslam
quelle