Das kennst Du bestimmt: Du nutzt Google Maps und  kommst  in einen Tunnel. Plötzlich wird es dunkel um dich herum. Die vormals helle Ansicht der Karten auf deinem Handydisplay verändert sich. Die Anwendung wechselt in den Dunkelmodus oder Dark Mode. Ein großer Vorteil: Dein Display bleibt angenehm gedimmt, ohne dich mit grellem Licht zu blenden. Viele Menschen bevorzugen diese Ansicht, da sie diese Kontraste als angenehmer empfinden.

Auch viele Entwicklungsumgebungen werden im Dark Mode betrieben, da ihre Nutzer täglich lange Bildschirmzeiten haben und deren Augen durch diese Ansicht geschont werden. Benutzer, die mit dem Handy unterwegs sind oder auf ihren digitalen Fußabdruck achten, möchten Strom sparen oder ihre Akkulaufzeit verlängern. Auch hier hilft der Dark Mode, da die Darstellung dunkler Pixel auf Geräten mit OLED- oder AMOLED-Displays weniger Strom verbraucht.

Schon länger unterstützen alle gängigen Browser den Dark Mode. Aber erst mit dem flächendeckenden Support von Custom Properties ist die Realisierung einfacher und besser nutzbar geworden. Deshalb ist es nur folgerichtig, dass auch Website-Betreiber ihre Seite im Dark Mode anbieten. Das bedeutet jedoch, dass das Corporate Design neu überdacht und um ein Farbspektrum erweitert werden muss.

Ausschnitt  action medeor im Hell und Dunkelmodus

Dark Mode: Corporate Design im Wandel

Ein gutes Corporate Design  entwickelt eine starke visuelle Identität. Unternehmen und Organisationen sollen durch den Einsatz gestalterischer Mittel wie - Farbe, Form oder Typografie -  wiedererkennbar sein. Werte und Markenbotschaften sollen durch die Wahl  der gestalterischen Mittel klar kommuniziert werden. Die Markenidentidät ist besonders anhängig von der Wahl der eingesetzten Farben.

Ab jetzt müssen Gestalter umdenken, denn der Dark Mode sollte schon bei Entwicklung des Corporate Design mitgedacht werden. Sicherlich sind nicht alle Gestalter davon begeistert, denn das bedeutet zusätzliche Designarbeit:

  • weil die Wahl der Corporate Design Farben dadurch nicht einfacher wird (schwarz / weiss ist nicht gleich Dark Mode).
  • weil es einen weiteren Farbraum im Dunkelmodus braucht, der Lesbarkeit und Ästehtik gewährleistet.
  • weil man alte Sehgewohnheiten überwinden und offen für neue Sichtweisen sein muss.
  • weil man ein sehr gutes Farbkonzept braucht, damit die Umsetzung später unter Verwendung weniger Farb-Variablen funktioniert.
  • weil alle visuelle Elemente und Grafiken, darauf überprüft werden müssen, dass sie auch im Dark Mode gut erkennbar sind und ausreichend kontrastieren.
  • weil Logo und Icons als svg hinterlegt werden müssen, damit die Farben problemlos angepasst werden können.
  • weil ich in meiner kreativen Freiheit eingeschränkt werde und ich vielleicht Farben verwenden muss, die ich nicht so mag. (Es geht bei Design nie um mich!)

Das Gegenargument, dass viele Benutzer helle Benutzeroberflächen erwarten, zählt nur bedingt, da der Dark Mode bewusst in den Einstellungen der jeweiligen Browser aktiviert werden muss. Benutzer, die den Dark Mode aktivieren, wissen genau, warum sie es tun.

Dark Mode: Zugänglicher und nachhaltiger

Sozial verantwortlich

Für Menschen mit Sehbeeinträchtigungen, wie Farbenblindheit oder eingeschränktem Sehvermögen, ist ein starker Kontrast oder eine dunklere Farbwahl hilfreich, um Texte gut lesbar und grafische Elemente klar erkennbar zu machen. Aber auch Menschen ohne Einschränkungen empfinden diese Ansicht oft als angenehmer. Der Benutzer kann den Dark Mode selbst in seinem Browser aktivieren. Solange er das nicht tut, sieht er die alternative Ansicht nicht.

Mit dem Angebot des Dark Modes erhöhst du also die Benutzerfreundlichkeit deiner Website. Deine Nutzer fühlen sich wohler, was ihre Interaktion mit deiner Seite verbessert. Zufriedene Nutzer neigen dazu, loyaler zu sein und sich positiver über deine Website zu äußern.

Energieeffizient und nachhaltig

Der Dark Mode spart Energie, insbesondere auf Geräten mit OLED-Displays, da dunkle Pixel weniger Strom benötigen. Ein Unternehmen, das einen umweltfreundlichen Ansatz unterstützt, wird als verantwortungsbewusst und nachhaltig wahrgenommen. Dieser ökologische Aspekt wird in Zukunft voraussichtlich immer wichtiger werden.

Der Dark Mode ist nicht nur eine Funktion, sondern ein Teil einer zeitgemäßen Corporate Identity. Er verbessert das Benutzererlebnis, fördert die Nachhaltigkeit und zeigt, dass ein Unternehmen oder eine Organisation moderne Technik nutzt und flexibel auf Benutzerwünsche reagiert.

Dark Mode: So geht es – kurz

Die Implementierung des Dark Modes wurde durch den Einsatz von CSS Custom Properties (CSS-Variablen) deutlich vereinfacht. Diese Methode ermöglicht es Entwicklern, zentrale Farbdefinitionen zu verwenden, die je nach Systempräferenz einfach zwischen hellem und dunklem Modus gewechselt werden können.

Hier ist ein Codeschnipsel:

:root {
--background-color: white;
--text-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
--background-color: black;
--text-color: white;
}
}

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

In diesem Codebeispiel wird unter Verwendung einer Media Query (@media (prefers-color-scheme: dark)) das Farbschema angepasst, wenn der Dark Mode aktiv ist. Die Nutzung von CSS-Variablen vereinfacht diesen Wechsel, da alle Farbwerte zentral definiert sind und durch die Media Query dynamisch angepasst werden.

Dark Mode im Einsatz

Wie immer hat der Schuster die schlechtesten Leisten. Meine eigene Website muss ich noch optimieren. Wenn man nach Inspiration oder Beispielen sucht, findet man jedoch viele gelungene Umsetzungen bei den großen Online-Medien, wie etwa bei bekannten Nachrichtenportalen oder bei action medeor.

 

 

Ich nutze Cookies,
aber nur technisch notwendige Session-Cookies.