Dark Mode

TL;DR

Dark Mode ist eine dunkle Farbvariante der Benutzeroberfläche. Auf OLED-Bildschirmen spart er bis zu 60% Bildschirmenergie, da schwarze Pixel ausgeschaltet bleiben.

Was ist Dark Mode?

Dark Mode invertiert das Farbschema einer Website: dunkler Hintergrund, helle Schrift. Was als Design-Trend begann, hat echte funktionale und ökologische Vorteile.

Vorteile von Dark Mode

• Energiesparen (OLED): Schwarze Pixel verbrauchen keinen Strom
• Augenfreundlich: Weniger Blendung bei Dunkelheit
• Bessere Lesbarkeit: Für manche Nutzer angenehmer
• Akku schonen: Längere Nutzung auf Mobilgeräten
• Nutzerwunsch: Viele Nutzer bevorzugen Dark Mode

Dark Mode und Energieverbrauch

Auf OLED-Displays (iPhone, viele Android-Geräte):

• Schwarze Pixel sind ausgeschaltet
• Bis zu 60% weniger Bildschirmenergie
• Bei stundenlanger Nutzung signifikante Ersparnis

Auf LCD-Displays ist der Effekt geringer, da die Hintergrundbeleuchtung immer läuft.

Dark Mode implementieren

• prefers-color-scheme: CSS-Media-Query für Systempräferenz
• Toggle: Nutzer können selbst wählen
• CSS-Variablen: Farben zentral definieren und switchen

Barrierefreiheit beachten

• Kontrast auch im Dark Mode prüfen
• Nicht zu dunkel – #121212 statt #000000
• Reines Weiß auf Schwarz kann blenden

Fazit

Dark Mode ist mehr als ein Trend – auf OLED-Geräten spart er echte Energie. Kombiniert mit Nutzerpräferenz und Barrierefreiheit ist er ein nachhaltiges Feature.