Ä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.
Antworten:
Der neue Standard ist auf W3C in Media Queries Level 5 registriert .
HINWEIS: Derzeit nur in Safari Technology Preview Release 68 verfügbarFalls die Benutzerpräferenz lautet
light
:Falls die Benutzerpräferenz lautet
dark
:Es gibt auch die Option
no-preference
fü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.- -
- -
- -
- -
- -
quelle
window.matchMedia("(prefers-color-scheme: dark)").matches
Wenn ich etwas Freizeit habe, werde ich meiner Antwort eine vollständige Javascript-Lösung hinzufügen.Wenn Sie es von JS erkennen möchten, können Sie diesen Code verwenden:
So achten Sie auf Änderungen:
quelle
matchMedia
und versucht dann, mit derprefers-color-scheme: dark
Zeichenfolge übereinzustimmen . Wenn es passt, sind wir im dunklen Modus.if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
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:Aber es scheint, dass dies privat ist .Auf MDN eine CSS - Media - Funktioninverted-colors
wird erwähnt . Plug: Ich habe hier über den dunklen Modus gebloggt .quelle
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.
quelle
Laut Mozilla ist hier die bevorzugte Methode ab September 2019
quelle