Darkmode oder Dunkelmodus auf Ihrer Website

22.1.2025
Absurde Illustration: Ein Staubsauger saugt die Sonne ein.

Der Darkmode oder auch Dunkelmodus gilt als stromsparend und augenschonend. Stimmt das und wie können sich Websites das zunutze machen?

Inhaltsverzeichnis

Gerade unter Entwicklern ist er erstaunlicherweise besonders beliebt. Aber auch außerhalb unserer Bubble erfreut er sich immer größerer Beliebtheit: der Darkmode oder auf Deutsch Dunkelmodus. Mit heller Schrift auf dunklem Hintergrund soll er nicht nur Strom sparen. Viele empfinden den Darkmode auch als angenehmer für die Augen. Das schauen wir uns heute genauer an. Stimmt dieses Gerücht denn? Wie kann der Darkmode eigentlich aktiviert werden und was muss ich machen, damit meine Website darauf reagieren kann?

Darkmode vs. Hochkontrastversion

Oft hört man, gerade in der Barrierefreiheit, auch von Hochkontrastversionen. Viele vermischen dabei beide Darstellungen. Deshalb wollen wir erst einmal kurz einen Blick darauf werfen, worin eigentlich der Unterschied liegt.

Der Darkmode oder Dunkelmodus stellt eine alternative Darstellung der Website dar, bei der aber nicht stärkere Kontraste notwendig sind als ohnehin. Theoretisch kann man also einfach Text- und Hintergrundfarben tauschen. Gegebenenfalls sollten allerdings gerade kräftige Akzentfarben etwas gedimmt werden, da diese auf dunklem Untergrund oft deutlich mehr leuchten. Unter Umständen hat sie also sogar geringere Kontraste als die helle Variante.

Die Hochkontrastversion ist eine Version, die in der Barrierefreiheit zwar nicht erforderlich ist, aber manchmal als zusätzliche Option angeboten wird. Sie zeichnet sich durch extrem hohe Kontraste nahe dem Maximum aus. Oft werden leuchtend gelber Fließtext und weiße Überschriften/Links auf schwarzem Hintergrund verwendet.

Wichtig: Beide Versionen werden von der WCAG nicht gefordert. Vielmehr müssen sich Websites an Farbeinstellungen der Nutzer anpassen, wenn diese im Browser hinterlegt wurden. Nur dann können Nutzer eine individuelle Darstellung nach Ihren Bedürfnissen erreichen. Das gilt insbesondere für die Hochkontrastversion.

Ist der Darkmode besser für die Augen?

Dass ein dunkles Display mit heller Schrift unbegingt besser für die Augen ist, lässt sich so pauschal nicht sagen. Die Antwort ist, wie so oft, ein: „Es kommt darauf an“. Lassen Sie uns die Sache etwas aufhellen (oder abdunkeln, je nach Vorliebe).

Die Vorteile des Darkmodes

Zunächst die guten Nachrichten: In dunklen Umgebungen können Sie mit dem Darkmode blendfrei und entspannter arbeiten, weshalb man ihn auch gern Nachtmodus nennt. Die reduzierte Bildschirmhelligkeit sorgt dafür, dass Ihre Augen weniger belastet werden – und mal ehrlich, wer will abends im Bett schon von grellen Weißtönen erschlagen werden? Ein weiteres Plus: Blaulicht, das den Schlafrhythmus stören kann, wird etwas reduziert – zumindest theoretisch.

Darüber hinaus spart er bei OLED-Displays tatsächlich eine Menge Strom und ist damit auch gut für die Umwelt.

Die Schattenseiten des Dunkelmodus

Wo Licht ist, ist auch Schatten – oder in diesem Fall: schlecht lesbarer Text. Gerade bei gut beleuchteten Umgebungen ist der Darkmode nicht immer ideal. Die Augen müssen hier mehr arbeiten, um die Inhalte scharf zu erkennen, da der Kontrast oft geringer ist.

Darüber hinaus kann kleine Schrift auf dunklem Hintergrund schnell anstrengend werden. Das liegt daran, dass die Pupillen größer bleiben, um mehr Licht einzufangen – das klingt gut, fühlt sich aber nach einer Weile an wie ein Fitnesstraining für Ihre Augenmuskeln.

Ein weiterer Punkt ist der sogenannte Nachbild-Effekt: Wenn Sie lange Zeit auf helle Texte vor dunklem Hintergrund schauen, können Ihre Augen Schwierigkeiten haben, sich an wechselnde Kontraste anzupassen. Das sorgt für ein leicht irritierendes Nachleuchten.

Wie kann man den Dunkelmodus aktivieren?

Die bevorzugte Darstellung wird üblicherweise systemweit getroffen. Zwar kann sie im Browser noch einmal überschrieben werden, die meisten Nutzer bevorzugen jedoch konsequent die eine oder die andere Variante für alle Programme. Deshalb schauen wir uns nur an, wie man den Darkmode auf diversen Betriebssystemen aktiviert.

Windows

  1. Einstellungen öffnen: Startmenü > Einstellungen (Zahnrad-Symbol)
  2. Personalisierung wählen
  3. Zum Reiter Farben navigieren
  4. Unter Modus auswählen: Dunkel, Hell oder Benutzerdefiniert wählen

Wählt man „Benutzerdefiniert“, so können die Farben für das System und Anwendungen getrennt gewählt werden.

MacOS

  1. Gehen Sie zu den Systemeinstellungen: Apfel-Menü > Systemeinstellungen
  2. Erscheinungsbild auswählen
  3. Dunkel, Hell oder Automatisch wählen

Mit der Einstellung „Automatisch“ schaltet das System zwischen Hell und Dunkel abhängig vom Tageslicht um.

Android

Pfad:

  1. Einstellungen öffnen.
  2. Zu Anzeige gehen.
  3. Dunkel oder Hell aktivieren.

In den Einstellungen für Dark Mode kann ein Zeitplan festgelegt werden, der diesen beispielsweise automatisch zwischen Sonnenuntergang und Sonnenaufgang anzeigt.

iOS

Pfad:

  • Einstellungen öffnen.
  • Anzeige & Helligkeit auswählen.
  • Darstellung: Dunkel, Hell oder Automatisch wählen.

Auch auf den iPhones kann der Automatisch-Modus mit Sonnenauf- und untergang synchronisiert werden.

Website in Darkmode oder Dunkelmodus

Hat man in seinem Betriebssystem, sei es am Rechner oder auf dem Mobiltelefon, einmal den Darkmode aktiviert, so passt sich automatisch die Darstellung des Systems an. Websites nutzen jedoch standardmäßig nur ihre eigenen Farben. Auf den Dunkelmodus muss man im CSS also selbst reagieren. Eine Website erscheint nur dann im Darkmode, wenn man diesen im CSS explizit definiert.

Vorbereitung: Variablen verwenden

Die größtmögliche Flexibilität erreicht man dann, wenn für alle Farben einer Website Variablen genutzt werden.

Anstatt also dieses CSS zu schreiben:

body {
    background: #eee;
    color: #333;
}

definieren wir uns Variablen und nutzen diese anschließend bei Bedarf:

:root {
    --background-body: #eee;
    --color-body: #333;
}

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

Der Vorteil von Variablen im CSS: Sie können beliebig manipuliert werden, die neuen Werte werden automatisch übernommen. So müssen Farben nur an einer Stelle verwaltet werden. In der Entwicklung außerdem praktisch: ändert man Farben im Prozess noch einmal, erspart man sich die mühevolle Suche nach den vielen Verwendungen.

Ich würde empfehlen, Variablen nach Ihrer Rolle und nicht nach dem Farbwert zu definieren. Wenn beispielsweise Weiß als Hintergrund der Seite und Textfarbe eines Buttons verwendet wird, dann definieren Sie ruhig zwei Variablen. Das gibt Ihnen die Möglichkeit, auch im Darkmode die helle Schrift beizubehalten, den Seitenhintergrund jedoch zu ändern. Spezielle Farben des Corporate Designs können gern trotzdem als Variable angelegt und dann wiederum zur Definition der Rollen-Variablen verwendet werden.

Eine Umfangreiche Einführung in CSS-Variablen finden Sie bei SelfHTML.

Den Darkmode im CSS erkennen: prefers-color-scheme

Haben wir alle unsere Farben als Variablen hinterlegt, ist es einfach, jede beliebige Variante zu erstellen. Abhängig von Media-Queries können diese geändert werden und so nicht nur einen Darkmode, sondern beispielsweise auch eine vollständige Schwar-Weiß-Version für den Druck erzeugen.

Den bevorzugten Farbmodus des Nutzers können wir mit prefers-color-scheme aberfragen, das die Werte „dark“ oder „light“ annehmen kann. Ist unsere Website also standardmäßig eher mit hellem Hintergrund und dunkler Schrift gestaltet, dann erzeugt folgender Code einen schöne Variante in dunkel:

@media (prefers-color-scheme: dark) {
    :root {
        --background-body: #333;
        --color-body: #eee;
    }
}

Nebeneinandergestellt sehen die beiden Varianten dann so aus:

Lightmode

Darkmode

Alternative: Nutzung der Funktion light-dark()

Möchte man nur einzelne Elemente im Dunkelmodus ändern oder unabhängig von definierten Variablen einzeln etwas anpassen, dann kann hierfür die Funktion light-dark() im CSS genutzt werden. Übergeben werden zwei Farbwerte, einer für den Lightmode und einer für den Darkmode. Der Browser überprüft dann selbst die aktuell aktivierte Version und nutzt die jeweilige Farbe. Damit er das tut, muss im Root-Element aber zunächst aktiviert werden, dass er auf das eingestellte Farbschema reagieren darf.

:root {
    color-scheme: light dark;
}

#lightdark {
  padding: 2rem; 
  background: light-dark(#eee, #333);
  color: light-dark(#333,#eee);
}

light-dark()

Fazit – Ein Darkmode auf Ihrer Website ist einfach umzusetzen und nützlich

Sie sehen, mit der richtigen Vorbereitung ist der Darkmode vergleichsweise schnell umgesetzt. Mit wenig Aufwand bieten Sie Nutzern, die diese Darstellung bevorzugen, einen großen Bonus.

Testen Sie es doch gern einmal aus und schauen Sie sich stolperfrei.digital im Dunkeln an (wen Sie das nicht eh schon tun). Durch die Anpassung aller Grafiken und Hintergründe entsteht eine ganz eigene Stimmung. Nutzer entscheiden dann selbst, welche Variante für sie angenehmer ist.

Übrigens kann über Media-Queries nicht nur die gewünschte Farbvariante abgefragt werden. Auch die Vorlieben für Animationen können vom Nutzer festgelegt, und im CSS verwendet werden. Lesen Sie dazu mehr im Artikel über Barrierefreie Animationen – wann Bewegung hilft und wann sie schadet.

Mehr entdecken

Das hat Ihnen gefallen? Dann verpassen Sie den nächsten nicht!

Jetzt per Newsletter erhalten
  • Absurde Illustration: Ein Megaphon aus dem Herzen klingen, per Kabel verbunden mit einem Kopfhörer mit menschlichen Ohren. Bedeutung: Steht symbolisch für Auditive Assistenztechnologien, insbesondere Screenreader.
  • Absurde Illustration: Ein Rotweinglas in dem man Wolken sieht, davor ein Whiskeyglas mit einer großen Welle. Auf der Welle sieht man ein Strichmännchen Surfen, vom Weinglas stürzen sich Fallschirmspringer und auf dem Fuß des Weinglases steht ein Angler.