Dark Mode: 5 Vorteile für deine Website

Was ist der Dark Mode?

Bevor wir uns aber auf die Vorteile des Dark Modes für deine Website konzentrieren müssen wir etwas in die Theorie gehen, um zu verstehen, was eigentlich hinter dem Dark Mode steckt. Und ob der Hype darum gerechtfertigt ist.

Der Dark Mode – ganz gleich, ob auf einer Website oder nativ in einem Betriebssystem – ist ein sog. „Hell-auf-Dunkel-Schema“. Wie der Name schon sagt, handelt es sich dabei um einen Modus und keine feste Gestaltung. Die Website erkennt dabei automatisch die Einstellung im Betriebssystem und wechselt abhängig davon in den Light oder Dark Mode.

Ist der normale Light Mode aktiviert, werden dunkle Inhalte auf hellem Hintergrund in der Standard-Darstellung dargestellt. In der Regel ist das schwarz auf weiß. Wenn aber der Dark Mode aktiviert ist, werden helle Inhalte, wie z. B. Texte, auf dunklem Hintergrund dargestellt. Das bringt einige Vorteile mit sich. Welche Vorteile das sind, dazu gleich mehr.

Nicht zu verwechseln ist der Dark Mode aber mit Websites und Apps, welche allgemein ein dunkles Farbschema aufweisen. Ein Beispiel dafür ist die Website von Auth0.

1. Dark Mode Vorteil: Barrierefreiheit der Website

Bei FeichtMedia haben wir in unserer Firmenphilosophie verankert, dass wir Websites nicht für Maschinen, sondern für Menschen machen. Deshalb sollen diese Websites auch für Menschen mit Handicap nutzbar sein.

Um barrierefreie Websites zu ermöglichen wurde vor einigen Jahren der „Kontrast-Modus“ eingeführt, welcher manuelle durch den Nutzer aktiviert werden kann und im Prinzip wie der Dark Mode funktioniert. Der Unterschied zum heutigen Dark Mode ist, dass der Kontrast-Modus oft noch nicht automatisch, den Betriebssystem-Einstellungen entsprechen, aktiviert wurde. Der Grund ist einfach: Damals gab es noch keine Technik, die die Vorteile eines Dark Modes spürbar gemacht hätte.

Heute ist das anders und relativ einfach umzusetzen. Durch die Media Queries in CSS und Funktionen in JavaScript kann einfach und schnell erkannt werden, ob der Nutzer den Dark Mode auf seinem Gerät aktiviert hat. Basierend auf der Einstellung können dann Variablen in CSS für z. B. die Textfarbe entsprechend deklariert werden.

Wie du den Dark Mode einfach in deine Website integriert erfährst du am Ende des Blog-Beitrags.

2. Dark Mode Vorteil: Besser für die Augen

Die Nutzung des Dark Modes hat auch einen Vorteil hinsichtlich deiner Gesundheit. Genauer gesagt für deine Augen, denn wie wir alle wissen, sollte man nie direkt in die Sonne oder eine Lampe sehen. Das ist anstrengend und auch nicht gesund.

Und das hat auch indirekt mit den Bildschirmen unsere Smartphones, Tablets und sonstiger Geräte zu tun. Bei Tageslicht ist es wahrscheinlich nicht anstrengend auf eine Website mit weißem Hintergrund zu schauen. Sitzen wir aber am Abend bei gedimmtem Licht auf der Couch, sieht das schon ganz anders aus.

Oft stellen wir dann die Helligkeit des Bildschirms runter, um das helle grelle Leuchten zu vermeiden. Dabei wird aber der Text schwerer zu lesen, was es anstrengend macht. Deshalb schafft hier der Dark Mode Abhilfe und ist ein Kriterium, welche Websites wir am Abend länger besuchen und welche wir am liebsten schnell wieder verlassen.

Der Dark Mode kehrt praktisch das Farbschema auf dem Bildschirm um, lässt den Hintergrund dunkel werden und die Texte weiß. Das macht es sehr angenehm im Dunkeln auf einen Bildschirm zu schauen und über längere Zeit zu lesen.

Hat deine Website nun die Möglichkeit, sich an die Einstellungen des Nutzers automatisch anzupassen oder gibt ihm die Möglichkeit, das manuell zu machen, hast du einen großen Vorteil. Denn wenn es für den Nutzer nicht „unbequem“ wird, deine Website im Dunkeln zu nutzen, bleibt er auch länger dort.

3. Dark Mode Vorteil: Einsparung von Akku

Der größte Energieverbraucher bei Smartphones, Tablets und Co. ist nach wie vor das Display. In den letzten Jahren wurden daher viele neue Technologien entwickelt, um das zu verbessern.

Einen besonders großen Vorteil bekommen Nutzer eines OLED-Displays mit dem Dark Mode. Bei dieser Displaytechnologie leuchten die Pixel selbst und benötigen keine Hintergrundbeleuchtung. Um nun die Farbe „Schwarz“ darzustellen, werden die jeweiligen Pixel einfach ausgeschaltet. Das spart über die Zeit sehr viel Akku.

Ein kleiner Nebeneffekt des Dark Modes mit OLED-Displays ist der Schwarzwert. Dadurch, dass schwarze Pixel nicht leuchten, entsteht 100% Schwarz, welches in der Nacht besonders gut aussieht und den Kontrast zu anderen Elementen auf der Website stark erhöht.

Für Nutzer, die kein OLED-Display in ihrem Gerät verbaut haben, bringt der Dark Mode hinsichtlich der Akku-Einsparung nur einen geringen Vorteil. Aber auch wenn die Hintergrundbeleuchtung der Pixel aktiviert ist, benötigt diese immer noch weniger Energie, wie wenn die Pixel auf voller Helligkeit – was die Farbe „Weiß“ ist – leuchten.

4. Dark Mode Vorteil: Kräftigere Farben

Bei diesem Dark Mode Vorteil kommen die Vorteile der vorherigen Punkte zusammen und lassen ein tolles Ergebnis entstehen.

Stell dir vor du, platzierst ein Bild auf einer Website mit weißem Hintergrund und dasselbe auf einer Website mit schwarzem Hintergrund. Wo vermutest du wirken die Farben des Bildes kräftiger? Richtig, auf der Website mit schwarzem Hintergrund.

Der Grund dafür ist, dass hell leuchtende Pixel immer Aufmerksamkeit auf sich ziehen. Da Pixel in ihrer hellsten Einstellung die Farbe Weiß erzeugen wird nun der „strahlende Effekt“ über die ganze Website verteilt und einzelne Bilder stechen nicht mehr so stark aus der Website hervor.

Hat man nun eine Website im Dark Mode mit schwarzem Hintergrund ziehen die schwarzen Bereiche wenig bis keine Aufmerksamkeit auf sich. Das lenkt unseren Blick eher auf Bilder und lässt deren Farben kräftiger und leuchtender erscheinen.

Ein gutes Beispiel dafür ist der FeichtMedia ImageManager. Darin ist auch der Dark Mode integriert und lässt die Bilder um einiges brillanter wirken, wie im Light Mode.

5. Dark Mode Vorteil: Spannung im Webdesign und User-Interface

Wir sind es gewohnt, Dinge schwarz auf weiß zu sehen. Die meisten Papiere sind weiß und der Text darauf schwarz. Die meisten Websites haben einen weißen Hintergrund und schwarzen Text.

Kommen wir nun auf eine Website, die automatisch zwischen Light und Dark Mode wechselt und haben einen schwarzen Hintergrund mit weißem Text darauf ist es etwas Neues und weckt automatisch unsere menschliche Neugier.

Ein dunkles Design schafft Abwechslung und bringt einige Vorteile mit sich: Es ist besser für die Augen, spart Akku und lässt Farben kräftiger wirken. Besonders in der Gaming- und Technologie Branche nutzen viele Websites bereits dunkle Webdesigns, aber leider ohne Dark Mode, welcher auch in einen Light Mode wechseln kann.

Eine der besten Websites, die bereits den Dark Mode integriert haben, ist die von Vercel.

So integrierst du den Dark Mode in deine Website

Nun zeige ich dir wie du mit wenigen Handgriffen den Dark Mode in deine Website integrieren kannst. Das Einzige, was wir dafür brauchen ist der CSS-Code deiner Website.

Es ist keine Voraussetzung, dass du mit CSS- oder SASS-Variablen arbeitest, spart aber besonders bei größeren Websites einiges an Arbeit.

Im nachfolgenden Beispiel zeige ich die Dark Mode Integration in eine Website mit CSS-Variablen, wie sie von jedem modernen Browser erkannt werden.

Im Body-Tag unserer HTML-Seite haben wir eine Headline 1 und einen Absatz als Fließtext.

1<!DOCTYPE html>
2<html lang="de">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Meine Website</title>
6  </head>
7  <body>
8    <h1>Headline 1</h1>
9    <p>
10      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
11      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
12      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
13      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
14      amet.
15    </p>
16  </body>
17</html>

Alle Styles und ggf. Anpassungen, die nur im Dark Mode gültig sein sollen befinden sich innerhalb von @media (prefers-color-scheme: dark) {}.

Um den Inhalt nun sowohl im Light Mode, als auch Dark Mode darstellen zu können, benötigen wir folgendes CSS:

1:root {
2    --page-background: #FFFFFF;
3    --text-color: #000000;
4}
5
6@media(prefers-color-scheme: dark) {
7    :root {
8        --page-background: #000000;
9        --text-color: #FFFFFF;
10    }
11}
12
13body {
14    background-color: var(--page-background);
15}
16h1, p {
17    color: var(--text-color);
18}