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.

:root {
  color-scheme: light dark;
}

@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">

<meta name="color-scheme" content="dark"> versetzt eine Seite automatisch in den Dark Mode.

Das ist schon ein großer erster Schritt. Eine Reihe von Farben und Hintergrundfarben stellt der Browser jetzt im Dark Mode selber um:

• Links, denen im CSS des Dokuments keine Farben zugewiesen wurden, bleiben zwar violett, aber im Darkmode ist das Violett heller.
  • #D0ADF0 hsl(271,69%,81%) █ Darkmode-Link
  • #551A8B hsl(271,68%,32%) █ Lightmode-Link
• Text ohne Vorbelegung wird weiß.
• Mit <mark> codierte Elemente behalten ihr strahlendes Gelb rgb(255, 255, 0) █
• audio und video behalten die Farben und den Hintergrund, der Hintergrund eines canvas-Elements ist im Light Mode weiß, im Dark Mode schwarz.

Steuerelemente im Dark Mode

Die Browser schalten die Darstellung von Formular-Elementen wie input type="search", input type="range", type="checkbox" und type="radio" automatisch um. fieldset- und legend-Elemente heben sich ebenfalls vom dunklen Hintergrund ab. Voraussetzung ist natürlich, dass den Elementen zuvor keine Farbe oder Hintergrundfarbe zugewiesen wurde.

Gut am progress-Element zu sehen: Der automatische Hintergrund der Linie im Dark Mode ist ein dunkles Grau, dass sich noch leicht vom Hintergrund abhebt.

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: #ddd;
	  --shadow-color: #111;
	  --highlight: #666;
	  --primary: hsl(12, 90%, 60%);
	}
}

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

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

Um die Liste nicht übermäßig zu verlängern, können individuelle Elemente direkt umgeschaltet werden:

button {
	background: light-dark(lightblue, darkblue);
}

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,85%,45%)
hsl(213,70%,70%)    hsl(213,80%,65%)
                             ▲
                             │
         Höhere Sättigung ───┘

Grafiken invertieren?

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%);
	}
}