SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

Damals (tr) waren media queries der Weg, um responsive Webseiten zu bauen.
Eigentlich ganz einfach:

  body { 
   color: navy;
  }


@media screen and (prefers-color-scheme: dark) {
  body { 
    background: navy;
    color: snow;
  }
}

Mit prefers-color-scheme kann abgefragt werden, ob in den System- oder Browsereinstellungen eine Auswahl getroffen wurde. Falls dies zutrifft, werden Hintergrund- und Textfarbe entsprechend geändert.

Idealerweise wurden im :root-Selektor Farbangaben – wenn möglich sogar eine ganze Farbpalette definiert:

:root {
  --color-background: white;
  --color-accent: red;
  --color-text: navy;
  --color-link: steelblue;
}
@media screen and (prefers-color-scheme: dark) {
:root {
    --color-background: navy;
    --color-accent: pink;
    --color-text: white;
    --color-link: skyblue;
  }
}

Diese Farbpalette wurde über custom properties notiert, die dann im weiteren Verlauf des CSS aufgerufen wurden. Schwierigkeiten traten auf, wenn man es vergaß, zu jeder Festlegung eines Hintergrunds auch die jeweilige Textfarbe so anzupassen, dass der Kontrast ausreichend groß ist.

CSS-Funktionen, die jeder braucht!

light-dark()

Einfacher geht das mit einer gar nicht mehr so neuen CSS-Funktion, die es ermöglicht, zwei Farben für ein HTML-Element festzulegen:

:root {
  color-scheme: light dark;
}
	
body { 
  background: light-dark(white, navy);
  color: light-dark(navy, white);
}

a { 
  color: light-dark(blue, skyblue);
}

Mit der color-scheme-Eigenschaft werden die beiden Farbschemata „freigeschaltet“.
Die Farbangaben sind jetzt übersichtlich nebeneinander platziert – die Gefahr eine Textfarbe zu vergessen sinkt.

Keine Angst, dies wird von allen modernen Browsern unterstützt!

contrast-color()

Noch einfacher wird es mit einer weiteren CSS-Funktion, die den Browsern die kontrastreichste Farbe selbst ermitteln lässt:

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

h1 {
	--header-color: var(--accent-color-1);
	background: var(--header-color);
	color: contrast-color(var(--header-color));	
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: var(--base-color-3);
  }
	h1 {
    --header-color: var(--accent-color-3);
  }
}	

Die Farbangaben für den Hintergrund werden in custom properties notiert. Diese custom property wird sowohl als Farbangabe sowohl für den Hintergund, als auch als Grundlage für die Textfarbe verwendet. Die Textfarbe wird mit contrast-color() vom Browser selbst ermittelt.

Auch wenn diese Funktion noch relativ neu ist, wird sie von den aktuellen Versionen der Browser bereits unterstützt (caniuse.

Siehe auch

Das ursprüngliche Tutorial las sich im Nachhinein relativ umständlich: Erst wurde erklärt, was Dark Mode den überhaupt sei, dann wurde gezeigt, wie man das im OS einstellen konnte und dann wurde an einem Beispiel gezeigt, wie das aussehen könnte.

Durch den Toggle, der es ermöglichte, auch entgegen der Systemeinstellungen umzuschalten, kam sogar (nicht nur) ein bisschen JavaScript ins Spiel.

Mittlerweile ist dieses fertige Beispiel nur eins von mehreren, die am Ende des Artikels verlinkt sind.

Dark Mode gehört heute zu jeder modernen Webseite! Der überarbeitete Artikel hilft Ineressierten hoffentlich ihre Ideen umsetzen zu können.