CSS Dark Mode

darkmode

Dark Mode wird über Einstellungen des Betriebssystems aktiviert und kennt i.d.R. drei Einstellungen: Dunkles Erscheinungsbild, helles Erscheinungsbild und eine automatische Anpassung an das Umgebungslicht.

Darkmode spart Energie auf OLED-Monitoren, nicht aber bei LCD-LED-Monitoren, eher also auf Mobiltelefonen, die über die letzten Jahre auf den Markt kamen. Ältere Handys haben ein LCD-Display, das Backlight zum Beleuchten der Pixel braucht.

LCD-LED-Moditore brauchen ein Backlight, das mit konstanter Intensität scheint. Um einen Punkt abzudunkeln, manipuliert ein elektrischer Strom die Kristalle, so dass das Licht blockiert wird – braucht also Energie. OLEDs hingegen realisieren den Dark Mode, indem sie spezielle OLEDs abschalten – das spart ein paar Prozent Energie.

CSS prefers color scheme

CSS gibt den modernen Browsern Zugriff auf die Einstellung des Erscheinungsbilds, so dass die Themes der Webseiten zwischen einem hellen und einem dunklen Modus wechseln können.

@media (prefers-color-scheme: dark) {
	body {
		background-color: #323232;
		color: #ccc;
	}
}

Dazu gibt es ein relativ neues Meta-Tag:

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
}

Steuerelemente im Dark Mode

Die Browser schalten die Darstellung einiger Elemente automatisch um. Dazu gehören in erster Linie Formular-Elemente wie input type="search", input type="range".

Dark Mode, Light Mode und CSS-Variablen

CSS-Variablen sind eine effiziente Methode, um die wichtigsten Elemente auf Light Mode / Dark Mode einzustellen.

@media (prefers-color-scheme: dark) {
	:root {
	  --background-color: #323232;
	  --text-color: #ccc;
	  --shadow-color: #111;
	  --highlight: #666;
	  --highlight-color: #eee;
	  --primary: hsl(12, 90%, 40%);
	}
}

@media (prefers-color-scheme: light) {
	:root {
	  --background-color: #fefefe;
	  --text-color: #222;
	  --shadow-color: #999;
	  --highlight: #cdcdcd;
	  --highlight-color: #000;
	  --primary: hsl(12, 70%, 50%);
	}
}

body {
	background-color: var(--background-color);
	color: var (--text-color);
}

Nur nicht einfach Weiß auf Schwarz

Wenn weiße Inhalte schnell über einem reinschwarzen Hintergrund gezogen oder gescrollt werden, kann es auf OLED-Monitoren zu einem Verschmieren kommen, denn das Schwarz entsteht durch das Abschalten der Pixel. Das Ein-/Ausschalten der Pixel ist langsamer als das Umschalten zwischen Farben.

Extreme Kontraste ermüden das Auge – das gilt sowohl für Schwarz auf Weiß als auch für Weiß auf Schwarz. Obendrein stehen hilfreiche Effekte wie z.B. ein leichter Schatten nicht mehr zur Verfügung.

Ein leichter Schatten rückt einen wichtigen Block in den Vordergrund. Auf dem tiefsten Schwarz ist kein Schatten möglich.

Farben für Dark Mode anpassen

Wenn Farben im HSL notiert werden, lassen sie sich durch ein Absenken der Helligkeit bei gleichzeitiger Erhöhung der Sättigung an den Darkmode anpassen: Diese Technik erhält den Farbton.

Light Mode			Dark Mode
       reduzierte Helligkeit ---+
                                |
                                |
hsl(12,80%,50%)     hsl(12,90%,40%)
hsl(210,50%,45%)    hsl(210,60%,35%)
                             |
                             |
         Höhere Sättigung ---+

Fotos zu invertieren – also als Negativ anzuzeigen – wird kaum eine gute Idee sein. Aber mit Grafiken ohne Hintergrund kann ein CSS filter: invert gute Ergebnisse liefern.

@media (prefers-color-scheme: dark) {	
	.imgfx {
		filter: invert(100%);
	}
}