"Responsive Webdesign" - dazu gehört auch Farbschema und Dark Mode!
Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
- Facebook
- Telegram
- WhatsApp
- Mail
access_timeGeschätzte Lesezeit ca. 5 Minuten
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.
prefers-color-scheme media query
Verfügbarkeit Weltweit: 91.37%
Media query to detect if the user has set their system to use a light or dark color theme.
Internet Explorer
nein
Microsoft Edge
79 +
Firefox
67 +
Google Chrome
76 +
Safari
12.1 +
Opera
62 +
iOS Safari
13.0-13.1 +
Opera Mini
nein
Android Webview
101 +
Android Chrome
101 +
Android Firefox
100 +
Samsung Internet
12.0 +
Daten abgerufen von https://caniuse.com/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.
.example-code *{
margin: 0;
padding: 0;
font-family: sans-serif;
line-height: 1.6em;
}
.container{
width: 80vw;
display: block;
padding: 2rem;
background: rgb(197, 197, 197);
margin-top: 20px;
border-radius: 2px;
}
.only-dark{
display: none;
}
@media (prefers-color-scheme: dark) {
h1,p,h2{
color: white;
}
.only-dark{
display: block;
}
.only-light{
display: none;
}
body{
background: black;
}
.container{
background: #292929;
}
}
<h1 class="only-dark">Dark Mode</h1>
<h1 class="only-light">Light Mode</h1>
<div class="container">
<h2>Hallo Welt</h2>
<p>Lorem ipsum dolor sitgs est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
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.
Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!
- Facebook
- Telegram
- WhatsApp
- Mail
Artikel wurde Zuletzt aktualisiert am 26.05.2021.
Kommentar schreiben