Dark Mode im mStudio und was das mit Energieeffizienz zu tun hat

Digitale Produkte haben einen ökologischen Fußabdruck, der oft unterschätzt wird: Die Endgeräte der Nutzenden tragen dabei den größten Anteil am Energieverbrauch, deutlich mehr als die genutzte Netzinfrastruktur. Der Bildschirm ist dabei einer der größten Stromverbraucher eines Geräts – je nach Gerät und Displaytyp kann er bei maximaler Helligkeit für fast drei Viertel des gesamten Stromverbrauchs verantwortlich sein. Ein dunkles Interface kann – unter bestimmten Voraussetzungen – genau hier ansetzen und den Energieverbrauch senken. 

Um zu verstehen, wann ein Dark Mode tatsächlich Energie spart, muss man wissen, wie unterschiedliche Bildschirmtechnologien Licht erzeugen. 

Bei LCD-Bildschirmen sitzt hinter der eigentlichen Anzeige eine durchgehende Hintergrundbeleuchtung (Backlight), meist auf Basis von LEDs. Diese Beleuchtung leuchtet unabhängig davon, welche Farbe gerade angezeigt wird, mit konstanter Intensität. Flüssigkristalle steuern dann, wie viel von diesem Hintergrundlicht durch die einzelnen Pixel hindurchgelassen wird. Auch wenn ein Pixel komplett schwarz dargestellt werden soll, wird das Hintergrundlicht nicht abgeschaltet – es wird lediglich möglichst stark blockiert. Der Stromverbrauch bleibt dadurch weitgehend unabhängig vom angezeigten Inhalt.

OLED-Displays funktionieren grundlegend anders. Hier erzeugt jedes einzelne Pixel sein Licht selbst, eine separate Hintergrundbeleuchtung entfällt komplett. Soll ein Pixel schwarz sein, wird es schlicht abgeschaltet und verbraucht in diesem Moment praktisch keinen Strom. Der Stromverbrauch eines OLED-Displays hängt damit direkt vom dargestellten Inhalt ab – dunkle Inhalte verbrauchen weniger Energie als helle.

Der Praxis-Unterschied lässt sich einfach zusammenfassen: 

Nur auf OLED-Bildschirmen führt ein dunkles Interface zu echten Energieeinsparungen, weil dort tatsächlich Pixel abgeschaltet werden können. Auf klassischen LCD-Bildschirmen mit Backlight bringt Dark Mode kaum einen messbaren Effekt. 

Hier lohnt sich ein Blick auf die Datenlage, denn die kursierenden Zahlen schwanken stark. Eine vielzitierte Studie der Purdue University aus dem Jahr 2021 hat den tatsächlichen Effekt systematisch an mehreren OLED-Smartphones gemessen. Bei einer für den Alltag typischen Bildschirmhelligkeit von 30 bis 50 Prozent ergab sich im Schnitt eine Ersparnis von 3 bis 9 Prozent des gesamten Stromverbrauchs des Geräts. 

Da ist aber noch was:  Die Bildschirmhelligkeit hat einen weit größeren Einfluss auf den Stromverbrauch als die Farbwahl des Interfaces. Eine Reduzierung der Helligkeit von 100 auf 50 Prozent senkt den Energieverbrauch eines OLED-Displays um etwa das Zehnfache – unabhängig davon, ob ein helles oder dunkles Farbschema verwendet wird. Erst bei sehr hoher Bildschirmhelligkeit (nahe 100 Prozent) fällt der Effekt von Dark Mode deutlich stärker aus: Bei voller Helligkeit können die Einsparungen laut derselben Studie bis zu 47 Prozent betragen. 

Eine 2024 veröffentlichte Pilotstudie von BBC Research & Development hat den Stromverbrauch an einem MacBook Pro mit klassischem 13,3-Zoll-LCD-Display gemessen, und zwar beim Aufruf einer Webseite jeweils in hellem und dunklem Design. Das Ergebnis: Bei keiner der getesteten Helligkeitsstufen gab es einen statistisch signifikanten Unterschied im Stromverbrauch zwischen Dark- und Light Mode. Einzig die eingestellte Bildschirmhelligkeit selbst hatte einen signifikanten Einfluss auf den Verbrauch.

Das Testportal Notebookcheck kommt bei einem Laptop mit OLED-Bildschirm zu einem gegenteiligen Ergebnis. Beim Lenovo ThinkPad X13 Gen 4 mit OLED-Display führte derselbe automatisierte WLAN-Akkutest – der überwiegend helle Webseiten lädt – im Dark Mode zu einer um 1,5 Stunden längeren Akkulaufzeit als im Light Mode. Ein deutlicher, direkt am Gerät gemessener Unterschied, der die theoretische Funktionsweise von OLED in der Praxis bestätigt. 

Besonders spannend ist ein zweiter Befund der BBC-Studie: In einem Nutzertest stellten die Teilnehmenden ihre bevorzugte Bildschirmhelligkeit am LCD-Laptop selbst ein – und wählten im Dark Mode tendenziell eine höhere Helligkeit als im Light Mode, und zwar unabhängig davon, ob der Raum hell oder dunkel beleuchtet war. Dieser sogenannte Rebound-Effekt kann mögliche Energieeinsparungen durch Dark Mode im Alltag zusätzlich zunichtemachen, sofern Nutzende ihr Verhalten entsprechend anpassen. 

Nachhaltigkeit ist für uns nicht nur eine ökologische, sondern auch eine soziale Frage. Und hier hat Dark Mode einiges zu bieten, wenn auch mit Nuancen. 

Besonders in dunklen Umgebungen oder bei längeren Arbeitssitzungen kann ein grelles weißes Interface als unangenehm empfunden werden. Der Dark Mode kann diese Augenbelastung reduzieren, insbesondere in schwach beleuchteten Umgebungen. In einer von der Plattform Accessibility Checker zitierten Nutzerbefragung gaben 93 Prozent der Befragten an, mit Dark Mode weniger Augenbelastung wahrzunehmen, vor allem bei schlechten Lichtverhältnissen.  

Auch Personen mit Lichtempfindlichkeit oder Photophobie berichten häufig, dass ein dunkles Interface angenehmer und zugänglicher ist, weil es eine sanftere visuelle Erfahrung bietet und die Konzentration erleichtert. Für Personen mit Dyslexie oder anderen Leseschwierigkeiten kann ein hoher Kontrast zwischen heller Schrift und dunklem Hintergrund die Buchstaben­erkennung erleichtern, weil die Konturen stärker hervortreten. Für Menschen mit Seheinschränkungen kann Dark Mode zudem bestehende komplexe Hintergründe oder Muster vereinfachen und es erleichtern, hellen Text auf dunklem Grund zu lesen – insbesondere in dunklen Umgebungen.  

Dark Mode ist nicht dasselbe wie ein echter Hochkontrastmodus, und Menschen mit Kontrast- oder Farbsehschwächen können mit einer dunklen Darstellung sogar größere Schwierigkeiten haben als mit einer hellen. Auch Nutzende von Tastatur-Navigation können Probleme bekommen, wenn Fokus-Indikatoren auf dunklem Hintergrund schlechter sichtbar sind, und ein vereinfachtes Farbschema kann die Navigation erschweren, wenn Farben zur Orientierung dienen. Hier erfährst du mehr über Barrierefreiheit.

Dark Mode ist eine sinnvolle zusätzliche Option, kein Ersatz für durchdachte Barrierefreiheit. Standardmäßig richtet sich unser Dark Mode nach den Systemeinstellungen des Besuchers, es ist aber möglich jederzeit zwischen hellem und dunklem Modus zu wechseln. 

Du willst auch einen Dark Mode auf deiner Website einbauen? Die Herausforderung besteht dabei nicht darin, eine Oberfläche einfach dunkler zu gestalten, sondern ein konsistentes Nutzererlebnis zu schaffen, das auch im dunklen Kontext verständlich, zugänglich und angenehm nutzbar bleibt. 

Für unseren Dark Mode haben wir bewusst kein zweites Farbsystem entwickelt. Stattdessen basiert unser Ansatz auf einer Farbskala mit zehn Abstufungen von hell bis dunkel. 

Im Dark Mode wird diese Skala gespiegelt und die Farbwerte werden neu zugeordnet. Helle Farbstufen wechseln dabei auf entsprechende dunkle Stufen der gleichen Skala. Die Komponenten selbst bleiben unverändert und verwenden weiterhin dieselben semantischen Design Tokens. Erst das Theme entscheidet, welcher konkrete Farbwert verwendet wird. Dadurch bleibt das Designsystem konsistent, wartbar und leicht erweiterbar. 

Eine dunkle Oberfläche bedeutet nicht automatisch eine schwarze Oberfläche. Reines Schwarz erzeugt einen sehr starken Kontrast zu hellem Text und kann dadurch auf Dauer anstrengend wirken. 

Deshalb setzen viele moderne Designsysteme auf verschiedene dunkle Graustufen. So entstehen natürliche Abstufungen zwischen Hintergrundflächen und Oberflächen, während die visuelle Hierarchie erhalten bleibt.

Farben, die im Light Mode gut funktionieren, sind nicht automatisch auch für den Dark Mode geeignet. Deshalb sollten Kombinationen aus Text, Hintergründen und interaktiven Elementen immer für beide Themes überprüft werden. 
 
Besondere Aufmerksamkeit erfordern dabei Farben, die nicht Teil des Designsystems sind. Beispielsweise Bilder, Illustrationen und oder individuell definierte Farben sollten geprüft werden, da sie auf dunklen Hintergründen schnell an Wirkung verlieren oder sich nicht mehr ausreichend vom Hintergrund abheben. 

Als Orientierung dienen die WCAG-Richtlinien. Für die Konformitätsstufe AA empfehlen sie für normalen Text ein Kontrastverhältnis von mindestens 4,5:1 und für Benutzeroberflächenelemente mindestens 3:1. Diese Werte helfen dabei, Inhalte auch für Menschen mit eingeschränktem Sehvermögen gut wahrnehmbar zu gestalten. 

Im Light Mode wird Tiefe häufig durch Schatten erzeugt. Auf dunklen Oberflächen sind diese jedoch deutlich weniger sichtbar. 
Stattdessen entsteht Hierarchie im Dark Mode meist über unterschiedliche Helligkeitsstufen. Eine Card kann beispielsweise etwas heller als der Hintergrund dargestellt werden. In unserem Designsystem ergänzen wir diesen Effekt zusätzlich durch eine sehr dezente Border, wodurch sich Oberflächen besser voneinander abheben. 
 
Ein guter Dark Mode entsteht also nicht durch das einfache Ersetzen heller Farben durch dunkle. Er basiert auf einem durchdachten Zusammenspiel aus Farbskala, Design Tokens und den Anforderungen an Barrierefreiheit. 
 
Genau diesen Ansatz verfolgen wir bei der Weiterentwicklung unseres Designsystems: kein zweites Design, sondern ein gemeinsames System mit zwei visuellen Ausprägungen. 

Ob Dark Mode wirklich Energie spart, lässt sich nicht pauschal beantworten – es kommt auf die Displaytechnologie an. Auf OLED-Bildschirmen sind messbare Einsparungen möglich, auf klassischen LCD-Displays bleibt der Effekt dagegen aus. Wer wirklich Energie sparen will, ist mit einer reduzierten Bildschirmhelligkeit oft besser beraten als mit der Wahl des Farbschemas.

Gleichzeitig zeigt sich: Dark Mode ist mehr als eine reine Energiefrage. Für viele Menschen bedeutet er weniger Augenbelastung und eine angenehmere Nutzung, gerade bei Lichtempfindlichkeit oder in dunklen Umgebungen. Er ersetzt jedoch keine durchdachte Barrierefreiheit und kann für manche Nutzergruppen sogar neue Hürden schaffen. Und technisch gesehen steckt hinter einem guten Dark Mode kein einfacher Farbtausch, sondern ein durchdachtes System aus Design Tokens, Kontrasten und visueller Hierarchie.

Wie viel Energie im Internet tatsächlich verbraucht wird, hängt aber nicht nur von Bildschirmhelligkeit oder der Wahl zwischen Dark und Light Mode ab. Mindestens genauso entscheidend ist, wie effizient die aufgerufene Seite selbst gebaut ist. Etwa wie viele Daten beim Laden übertragen werden müssen und wie schnell Inhalte im Hintergrund verarbeitet werden. Genau hier setzen auch unsere 15 Energie-Hacks an, die wir an anderer Stelle vorgestellt haben. Ein Beispiel dafür sind unsere Bildkomprimierungs- und Caching-Extensions im mStudio: Sie sorgen dafür, dass Bilder verkleinert und wiederkehrende Inhalte zwischengespeichert werden, wodurch bei jedem Seitenaufruf spürbar weniger Daten übertragen und verarbeitet werden müssen. Bei bilderlastigen Websites ist somit eine CO₂-Ersparnis von 50 Prozent möglich.

Der Dark Mode ist damit ein weiterer Baustein, mit dem wir einen kleinen Beitrag zur digitalen Nachhaltigkeit leisten, sowohl ökologisch als auch sozial.