Webdesign

Dark Mode – Was ist das?

Der Dark Mode ist ein alternatives Farbschema mit dunklem Hintergrund und heller Schrift, das die Augen schont, den Akku spart und modern aussieht.

Dark Mode im Detail

Dark Mode (Dunkelmodus) kehrt das klassische Farbschema um: Statt schwarzer Schrift auf weißem Hintergrund wird helle Schrift auf dunklem Hintergrund dargestellt. Seit iOS 13 und Android 10 ist er zum Standard auf Smartphones geworden.

Vorteile des Dark Mode

  • Augenfreundlich: Weniger blaues Licht, angenehmer bei Dunkelheit
  • Akku sparen: Bis zu 30% bei OLED-Displays
  • Modern: Signalisiert technische Aktualität
  • Barrierearm: Manche Nutzer mit Sehbehinderungen bevorzugen Dark Mode

Technische Umsetzung

Über die CSS-Media-Query prefers-color-scheme: dark erkennt die Website die Systemeinstellung des Nutzers und wechselt automatisch. Zusätzlich sollte ein manueller Toggle-Button angeboten werden.

Praxisbeispiel

Eine Nachrichten-Website führt Dark Mode ein. Die nächtliche Nutzungsdauer steigt um 23%, weil Leser im Bett länger lesen, ohne von hellem Licht gestört zu werden. Die Absprungrate sinkt abends um 15%.

Dark Mode bei TwoPixels

Alle unsere Dashboards und modernen Websites bieten einen Dark Mode. Bei Kundenprojekten berücksichtigen wir von Anfang an beide Farbschemata im UX Design.