Two Face, oder: Dark Mode für Websites in CSS umsetzen
Veröffentlicht am 03.12.2019
Spätestens mit den letzten Releases von macOS und iOS ist der Dark Mode bei Benutzern angekommen. Und es spricht auch viel dafür: weniger anstrengend für die Augen, und je nach Display sogar stromsparender. Der Dark Mode wird meist auf Betriebssystem-Ebene integriert und aktiviert. Und für Websites lässt er sich auch ganz einfach per Dark Mode CSS berücksichtigen.
Seit kurzem ist auch meine Website für Dark Mode vorbereitet. Das ganze ist in wenigen CSS-Zeilen implementiert, zumindest wenn die Komplexität der Seite nicht all zu hoch ist.
Dark Mode CSS: so einfach geht’s
Das Dark Mode CSS basiert auf der Anweisung @media( prefers-color-scheme: dark )
. @media
kennt man ja bereits, um zum Beispiel responsive Anweisungen zu geben. Innerhalb dieser Media-Anweisung werden ganz reguläre Selektoren und Werte genutzt.
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #e2e2e2;
}
h1, h2, h3, h4, h5, h5 {
color: #f4f4f4;
}
img {
filter: grayscale( 20% );
}
hr {
border-color: #555555;
}
p code {
color: #333333;
}
}
Meine Empfehlungen zu Dark Mode CSS
Meine Empfehlung: nutzt keine absolut schwarzen oder weißen Werte, denn meist wird Dark Mode eingesetzt, um auch etwas Kontrast zu reduzieren, z.B. wenn sich die Person in einer dunklen Umgebung befindet. Daher habe ich beim Hintergrund auf #333333
gesetzt sowie bei der Schriftfarbe auf #e2e2e2
, bei Überschriften aufgrund der genutzten Light-Font etwas heller: #f4f4f4
.
Ebenfalls empfehlenswert: Das leichte entfärben von Bildern, denn dann „knallen“ diese auch nicht mehr so. Dies lässt sich mit einem einfachen filter: grayscale( 20% )
erreichen.
Über die oben gezeigten Definitionen hinaus kommen bei mir noch wenige Zeilen für Kommentar-Bereich, Eingabefelder und einzelne im normalen Theme überschriebene Farbangaben hinzu. Dies variiert natürlich je nach bisheriger CSS-Arbeitsweise.
Ob Dark Mode genutzt wird, entscheidet der Browser bzw. übergeordnet das Betriebssystem. Wenn also kein Dark Mode aktiviert ist, wird die @media
Anweisung ignoriert und der Benutzer erhält das ganz reguläre CSS, so wie es bei anderen @media
Definitionen auch passieren würde.
Übrigens: Dark Mode „has come full circle“: die ersten Computer-Bildschirme hatten alle eine grün-auf-schwarz-Darstellung, wie man es von Terminals/Konsolen á la Matrix kennt. Irgendwann ist wohl alles wieder in Mode.