Mit dem Dark Mode kann man in so ziemlich jedem Betriebssystem den Wunsch äußern, dass alle Darstellungen möglichst dunkel gehalten werden sollen – in der Regel mit heller Text auf dunklem Hintergrund. Interessanterweise betrifft dieser Wunsch auch Webseiten.
Der Dark Mode hat inzwischen in so ziemlich jedem Betriebssystem Einzug gehalten. So sind z.B. in Windows 10, Mac OSX, Linux, Android und auch iOS Einstellungen vorhanden, mit denen viele Applikationen sich diesem Farbwunsch anpassen.
Interessanterweise wird dieser Wunsch vom Betriebssystem auch auch an Browser weitergereicht. Der Browser entscheidet aber nicht selber, wie eine Seite im Dark Mode umgefärbt werden muss, sondern überlässt die Definition des Verhaltens dem jeweiligen Betreiber der Website, die gerade besucht wird.
@media (prefers-color-scheme: dark)
Technisch wird das über eine @media-Query in CSS gelöst:
@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
}
a {
color: orange;
}
}
Dabei müsst ihr als Entwickler nicht zwangsläufig euer Betriebssystem auf Dark Mode umschalten, um eure Styles zu testen. In Chrome kann man den Dark Mode kurzzeitig aktivieren, indem man im Web Inspektor (z.B. via F12 öffnen) mittels Strg+Shift+P die Kommandoleiste aktiviert, und dort „color-scheme“ (oder „dark“) eintippt. Eine Auswahl namens „Emulate CSS prefers-color-scheme: dark“ für die Aktivierung des Dark Mode im Browser erscheint.
Dark Mode mittels CSS-Variablen
Mit CSS-Variablen bzw. CSS Custom Properties kann man unter anderem auch wunderschöne Farbdefinitionen hinterlegen, die je nach @media-Query abgeändert werden können. Neben der Verwendung für Print-Styles ist die Verwendung für den Dark Mode eine gute Idee.
Anstatt in eurem CSS an jedem Element Farbcodes zu hinterlegen, die dann für jede Kombination aus Media-Query und Element neu definiert werden müssen, hinterlegt ihr an den einzufärbenden Elementen nur CSS-Variablen. Diese definiert ihr zentral, und könnt diese auch zentral umschalten:
@media screen {
:root {
--color-background: #ffffee;
--color-text: #111100;
--color-link: #000899;
--color-link-hover: #1520c7;
}
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #333;
--color-text: #fff;
--color-link: #0eb9e7;
--color-link-hover: #39cbf6;
}
}
body {
color: var(--color-text);
background-color: var(--color-background);
}
a {
color: var(--color-link);
}
a:hover {
color: var(--color-link-hover);
}
Übrigens kann man auch SVG-Grafiken in der Seite mit diesem Trick umfärben lassen, da SVG-Grafiken ebenfalls über CSS ihre Farben verändern können:
svg {
fill: var(--color-text);
stroke: var(--color-text);
}
Dark Mode und Grafiken
Mit der obigen Methode können natürlich auch Hintergrundgrafiken ausgetauscht werden. In vielen Fällen ist das aber nicht nötig: Üblicherweise werden beim Bau von Grafiken von Websites viele Grafiken auf weiße Hintergrundfarben freigestellt. Hier sollte man prüfen, ob diese nicht besser auf einen transparenten Hintergrund (als PNG-Grafik) freigestellt werden.