Es gibt eine Reihe von Möglichkeiten, einen Dark Mode für Ihre Website zu implementieren. Im Wesentlichen bereiten Sie alle Stile dafür vor und wenden sie dann an, wenn der Benutzer angegeben hat, dass er sie wünscht, sei es durch direkte Wahl oder eine Systemeinstellung. Wenn Ihre Website keinen Dark Mode hat, dann hat sie eben keinen Dark Mode.
Chrome testet eine Änderung, die Ihre Website zwingt, einen Dark Mode zu haben, wenn ein Benutzer dies auf Systemebene bevorzugt. André Cipriani Bandarra
Mit dieser Funktion wendet der Browser ein automatisch generiertes Dark Theme auf helle Themes an, wenn der Benutzer in seinem Betriebssystem dunkle Themes aktiviert hat. Benutzer können dunkle Themes deaktivieren, indem sie die Option auf Betriebssystemebene oder in einer speziellen Einstellung in Chrome ausschalten.
Ein bisschen beängstigend, finde ich. Aber hey, lasst es uns testen. Sie haben die Möglichkeit, dies direkt in Chrome DevTools zu testen, integriert.
Nur mal schnell meine eigene Seite angeschaut...
Die Homepage sieht beschissen aus, da der explizite weiße Hintergrund nicht umgeschaltet wurde. Ich bin mir nicht sicher warum, da es auf Artikelseiten viel besser aussieht.
Das WordPress-Admin ist berühmt dafür, keinen Dark Mode zu haben, also hier ein Blick darauf.
Ich habe gemischte Gefühle dazu. Einerseits sollten Benutzer die Kontrolle darüber haben, was sie in ihren Browsern auf ihren Computern sehen möchten. Niemand behauptet, dass Barrierefreiheitsfunktionen wie hoher Kontrast, Farben umkehren oder reduzierter Bewegungsmodus nicht existieren sollten. Sie beeinflussen direkt das Rendering von Websites. Dies könnte als Barrierefreiheitsfunktion betrachtet werden. Andererseits kann dies zu Barrierefreiheitsproblemen *führen* (Fallbeispiel: die Kontrastprobleme, die hier im ersten Screenshot sichtbar sind).
Dies ist vorerst nur ein Origin Trial, daher gehe ich davon aus, dass noch viel Zeit bleibt, bevor dies veröffentlicht wird und Probleme behoben werden können. Aber das Web ist riesig, daher stelle ich mir vor, dass die Randfälle hier absolut verrückt sind und dies sehr schwer zu perfektionieren sein wird. Es ist nicht einmal klar, ob dies nur eine Chrome-auf-Android-Sache ist oder ob es sich weiter verbreiten wird. Es ist auch nicht klar, ob es Ihre Website in Ruhe lässt, wenn Sie einen handgefertigten Dark Mode haben, oder ob es immer noch das Design durcheinanderbringt. Ich persönlich würde wahrscheinlich ihren Mechanismus zum Opt-out verwenden, bis ich die Details richtig hinbekomme.
Ich stimme Ihnen zu, der Auto-Dark-Theme ist ziemlich problematisch.
Anfangs erwartete ich, dass Chrome Farben primitiv invertiert, aber es scheint fortschrittlicher (und daher viel unzuverlässiger). Die Invertierung ist ziemlich selektiv; zum Beispiel, wenn ich einen limettengrünen Hintergrund habe, verwandelt er ihn seltsamerweise nicht in dunkelgrün (oder ein dunkles Grau).
Aber zum Thema Auto-Dark-Mode, ich finde Aral Balkans Workaround ziemlich interessant: CSS-Filter. https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/ Ziemlich faul, aber es scheint bessere visuelle Ergebnisse zu liefern :)
DarkReader (Chrome-Erweiterung) funktioniert dafür unglaublich gut. Es ist unglaublich nervig, das nicht auf Android zu haben – Chrome hat es früher erlaubt und es war ziemlich mies (wie oben), aber es war besser, als nachts geblendet zu werden.
Ich denke, dass in ein paar Jahren ein großer Prozentsatz der Benutzer die gleiche Einrichtung haben wird wie ich jetzt: Dark Mode nach Sonnenuntergang, Light Mode nach Sonnenaufgang.
Als Benutzer bevorzuge ich Dark Mode in den meisten Szenarien und wäre nicht verärgert, wenn er verbreiteter wäre. Ich hoffe nur, dass dies keine Zufallsschicht einführt, bei der jeder Browser seine eigenen individuellen und natürlich unvollkommenen Heuristiken mitbringt. Wir haben bereits eine solche Situation für Dark Mode in E-Mail-Clients und es ist nicht schön, obwohl manchmal wirklich lustig. Aber ich bin optimistisch, dass solche Bedenken hinfällig sind, da es so aussieht, als hätten Autoren diese standardkonformen Möglichkeiten, um sicherzustellen, dass ihre Absichten respektiert werden.
Oh mein Gott, vielen Dank, Sie haben mein Leben verändert… habe das über Google Discover gefunden… ich benutze die Dark Reader-Erweiterung seit fast einem Jahrzehnt und sie war immer ein bisschen zu schwerfällig… endlich ist sie in Chrome integriert (wenn auch versteckt in den Devtools)!!! Vielen Dank fürs Teilen.
Habe es ausprobiert. Scheint eine coole Funktion zu sein, aber die Chrome-Erweiterung https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhnkhdbieeh ist besser.
Einfacher Dark-Mode-Algorithmus
Das ist schlecht für Bilder, Videos oder andere Medienelemente.