"Responsive Webdesign" - dazu gehört auch Farbschema und Dark Mode!

Der Dark Mode ist ein Feature, das erst durch MacOS Mojave auch bei Nicht-Entwicklern und -Programmieren wirklich Bekanntheit erlangt hat. Davor war es doch eher etwas für den Code Editor oder die IDE. Aber das ganze Betriebsystem in den Dark Mode zu wechseln war bei MacOS gar nicht und bei Windows auch nur über Umwege möglich. Seit Windows 10, Version 1607, dem sogenannten "Anniversary Update", gibt es die Dark Mode-Option auch unter Windows 10. Mit dem Update von iOS auf die Version 13 gibt es auch hier die Möglichkeiten für einen Dark Mode. Bei Android gibt es den vollständigen Dark Mode ab Version 10 im System.

Browser Support

Inzwischen ist auch der CSS Support für "prefers-color-scheme", den Media Queries, im Browser angekommen. Darüber kann Dark Mode oder auch Light Mode angesteuert werden. Dieser kann in allen relevanten Browsern verwendet werden. Dazu zählen:

• Firefox ab Version 67,
• Chrome ab Version 76,
• Safari ab Version 12.1,
• Opera ab Version 62,
• iOS Safari ab Version 13.1,
• Chrome Android ab Version 79,
• Firefox Android ab Version 68

Die Versions Angaben habe ich von https://caniuse.com/#feat=prefers-color-scheme, dort findest du auch noch weitere Information zur Unterstützung vom Media Querie "prefers-color-scheme".

Eine Webseite mit Dark Mode könnte zum Beispiel folgendermaßen aussehen:

Für wen ist der Dark Mode geeignet?

Der Dark Mode ist für Menschen geeignet, die viel und lange am Stück am PC arbeiten müssen. Viele Personen bevorzugen deshalb den Dark Mode, da es für die Augen oft als angenehmer empfunden wird. Bei OLED Displays kann durch das Ausschalten einzelner Pixel auch Strom gespart werden, was oft ein toller Nebeneffekt ist, wenn man nur noch wenig Akkuleistung hat. Bei klassichen LED-Bildschirmen sind die Auswirkungen auf den Stromverbrauch marginal und zu vernachlässigen.

Wie kann ich den neuen Media Querie/Query 'prefers-color-scheme" verwenden?

Die neue @media-Regel, die für den Dark Mode-Support hinzugekommen ist, heißt "prefers-color-scheme". Darüber kannst du nicht nur den Dark Mode ansteuern. Zuerst einen Dark Mode zu gestalten und später einen Light Mode hinzuzufügen ist genau so möglich.

Folgende Werte stehen "prefers-color-scheme" zur Verfügung:

• "no-preference" sagt aus, dass der Nutzer keinen Modus in seinem System definiert hat.
• "light" sagt aus, dass der Nutzer einen hellen Modus in seinem System definiert hat.
• "dark" sagt aus, dass der Nutzer einen dunklen Modus, den allseits bekannten Dark Mode, in seinem System definiert hat.

So könnte zum Beispiel der Dark Mode einer sehr einfachen Webseite, mit Media Queries gesteuert, aussehen; natürlich reicht es bei den meisten Webseiten nicht aus, nur die Farben zu ändern, da oft auch Borders und Box Shadows Farben mitbringen, die auf den Dark Mode angepasst werden sollten.

@media (prefers-color-scheme: dark) {
    body{
        background: black;
    }

    h1{
        color: white;
    }
}

Das Beispiel aus dem GIF-Bild oben habe ich nun hier noch einmal voll funktionsfähig eingebunden. Du kannst nun mal in deinem Betriebsystem den Dark Mode deaktivieren bzw. aktivieren und dir anschauen, wie sich der Inhalt des nachfolgenden Beispiels ändert.

Fazit

Ich persönlich finde die Möglichkeit sehr interessant, einen Media Querie für den Dark Mode zu haben, da ich den Dark Mode sehr angenehm zum Arbeiten finde. Allerdings muss man sagen, dass man natürlich mehr Zeit investieren muss, wenn man einen optisch stimmigen Dark Mode in eine Webseite integrieren will. Es ist dann natürlich am Ende auch eine wirtschaftliche Frage, ob es sich lohnt oder nicht. Für eine Webseite, die den Nutzer in seinem gewohnten Umfeld ansprechen will, ist ein zusätzlicher Dark Mode sicherlich eine gute Option, aber definitiv mit mehr Aufwand verbunden.