Dark Mode, auf Deutsch dunkler Modus, bezeichnet ein Farbschema für Oberflächen, bei dem helle Schrift und helle Bedienelemente auf dunklem Hintergrund dargestellt werden. Er ist das Gegenstück zum klassischen hellen Erscheinungsbild
Verbreitung
Dunkle Oberflächen gab es schon lange in Entwicklungsumgebungen und Videoplayern. Als systemweite Option setzten sie sich 2018 und 2019 durch, als große Betriebssysteme für Computer und Smartphones einen eigenen dunklen Modus einführten. Seitdem erwarten viele Nutzende, dass Apps und Webseiten ihre Einstellung respektieren.
Vorteile
Ein dunkles Schema wird in schwach beleuchteten Umgebungen oft als angenehmer empfunden, weil das Display weniger Licht abstrahlt. Manche Menschen mit Lichtempfindlichkeit profitieren davon. Auf Geräten mit OLED-Displays kann ein dunkler Hintergrund außerdem Energie sparen, da schwarze Pixel dort kaum Strom verbrauchen. Bei LCD-Displays, die ständig hinterleuchtet werden, entfällt dieser Effekt. Pauschale Aussagen, der Modus schone grundsätzlich die Augen, sind wissenschaftlich nicht belegt. Entscheidend ist vor allem die persönliche Vorliebe, und die Wahlfreiheit selbst ist der eigentliche Gewinn.
Dark Mode ist keine Farbinvertierung
Ein häufiger Fehler besteht darin, alle Farben schlicht umzukehren. Eine reine Invertierung macht aus Weiß Schwarz, verwandelt aber auch Fotos in Negative, verfälscht Markenfarben und zerstört die Wirkung von Schatten. Ein gelungener Dark Mode ist daher ein eigenständig gestaltetes Farbschema mit angepassten Werten für Flächen, Text, Akzente und Bilder.
Gestalterische Fallstricke
Reines Schwarz als Hintergrund und reines Weiß als Schrift erzeugen einen sehr harten Kontrast, der bei längerem Lesen anstrengend wirken kann. Gebräuchlicher ist ein sehr dunkles Grau für Flächen und ein leicht abgetöntes Weiß für Text. Gesättigte Farbtöne wirken auf dunklem Grund intensiver und vibrieren schneller. Akzentfarben werden deshalb häufig aufgehellt und in ihrer Sättigung reduziert.
Tiefe lässt sich nicht mehr allein über Schatten darstellen, weil diese auf dunklem Grund kaum sichtbar sind. Stattdessen werden erhöhte Ebenen oft mit etwas helleren Flächen gekennzeichnet. Auch Kontraste müssen neu geprüft werden: Ein Farbpaar, das im hellen Schema die Anforderungen nach WCAG erfüllt, kann im dunklen Schema durchfallen. Logos, Illustrationen und Bilder benötigen häufig eigene Varianten, etwa helle Versionen dunkler Schriftzüge oder transparente Hintergründe.
Technische Umsetzung im Web
Technisch handelt es sich um eine reine Darstellungsfrage, die der Browser anhand der Systemeinstellung beantworten kann, ohne dass Skripte nötig wären.
Im Web lässt sich die Systemeinstellung über die CSS-Medienabfrage prefers-color-scheme auslesen, die die Werte light und dark kennt. Mit der Eigenschaft color-scheme teilen Entwickelnde dem Browser außerdem mit, welche Schemata eine Seite unterstützt, sodass Formularelemente und Scrollleisten passend dargestellt werden. Bewährt hat sich der Einsatz von benannten Farbvariablen, sogenannten Design Tokens. Sie werden nach ihrer Rolle benannt, etwa Hintergrund oder Textfarbe, und erhalten je Schema eigene Werte. So bleibt das FarbsystemEin Farbsystem ist die Gesamtheit der Farben, die ein Unternehmen oder eine Marke innerhalb ihres Corporate Designs verbindlich einsetzt, zusammen mit den Regeln, nach denen diese Farben kombiniert und angewendet werden. Anders als eine einzelne Markenfarbe, etwa ein bekanntes Rot oder Blau, umfasst ein Farbsystem meist eine ganze Palette: Primärfarben, Sekundärfarben, Akzenttöne sowie abgestufte Varianten in Helligkeit und Sättigung. Kern…
Weiterlesen: ErscheinungsbildCorporate Design bezeichnet das einheitliche visuelle Erscheinungsbild eines Unternehmens, einer Organisation oder einer Institution. Es umfasst alle gestalterischen Elemente, mit denen sich ein Absender nach außen und nach innen präsentiert, und sorgt dafür, dass er an jedem Berührungspunkt als derselbe erkennbar bleibt. Corporate Design ist ein zentraler Bestandteil der Corporate Identity, also der Gesamtheit aus Haltung, Verhalten, Kommunikation und Erscheinungsbild. und steht heute in Betriebssystemen, Apps und Webseiten als Option zur Verfügung. Nutzende können ihn meist dauerhaft wählen oder die Einstellung dem Betriebssystem überlassen, das je nach Tageszeit automatisch umschaltet.
Verbreitung
Dunkle Oberflächen gab es schon lange in Entwicklungsumgebungen und Videoplayern. Als systemweite Option setzten sie sich 2018 und 2019 durch, als große Betriebssysteme für Computer und Smartphones einen eigenen dunklen Modus einführten. Seitdem erwarten viele Nutzende, dass Apps und Webseiten ihre Einstellung respektieren.
Vorteile
Ein dunkles Schema wird in schwach beleuchteten Umgebungen oft als angenehmer empfunden, weil das Display weniger Licht abstrahlt. Manche Menschen mit Lichtempfindlichkeit profitieren davon. Auf Geräten mit OLED-Displays kann ein dunkler Hintergrund außerdem Energie sparen, da schwarze Pixel dort kaum Strom verbrauchen. Bei LCD-Displays, die ständig hinterleuchtet werden, entfällt dieser Effekt. Pauschale Aussagen, der Modus schone grundsätzlich die Augen, sind wissenschaftlich nicht belegt. Entscheidend ist vor allem die persönliche Vorliebe, und die Wahlfreiheit selbst ist der eigentliche Gewinn.
Dark Mode ist keine Farbinvertierung
Ein häufiger Fehler besteht darin, alle Farben schlicht umzukehren. Eine reine Invertierung macht aus Weiß Schwarz, verwandelt aber auch Fotos in Negative, verfälscht Markenfarben und zerstört die Wirkung von Schatten. Ein gelungener Dark Mode ist daher ein eigenständig gestaltetes Farbschema mit angepassten Werten für Flächen, Text, Akzente und Bilder.
Grafik: Designbote
Gestalterische Fallstricke
Reines Schwarz als Hintergrund und reines Weiß als Schrift erzeugen einen sehr harten Kontrast, der bei längerem Lesen anstrengend wirken kann. Gebräuchlicher ist ein sehr dunkles Grau für Flächen und ein leicht abgetöntes Weiß für Text. Gesättigte Farbtöne wirken auf dunklem Grund intensiver und vibrieren schneller. Akzentfarben werden deshalb häufig aufgehellt und in ihrer Sättigung reduziert.
Tiefe lässt sich nicht mehr allein über Schatten darstellen, weil diese auf dunklem Grund kaum sichtbar sind. Stattdessen werden erhöhte Ebenen oft mit etwas helleren Flächen gekennzeichnet. Auch Kontraste müssen neu geprüft werden: Ein Farbpaar, das im hellen Schema die Anforderungen nach WCAG erfüllt, kann im dunklen Schema durchfallen. Logos, Illustrationen und Bilder benötigen häufig eigene Varianten, etwa helle Versionen dunkler Schriftzüge oder transparente Hintergründe.
Technische Umsetzung im Web
Technisch handelt es sich um eine reine Darstellungsfrage, die der Browser anhand der Systemeinstellung beantworten kann, ohne dass Skripte nötig wären.
Im Web lässt sich die Systemeinstellung über die CSS-Medienabfrage prefers-color-scheme auslesen, die die Werte light und dark kennt. Mit der Eigenschaft color-scheme teilen Entwickelnde dem Browser außerdem mit, welche Schemata eine Seite unterstützt, sodass Formularelemente und Scrollleisten passend dargestellt werden. Bewährt hat sich der Einsatz von benannten Farbvariablen, sogenannten Design Tokens. Sie werden nach ihrer Rolle benannt, etwa Hintergrund oder Textfarbe, und erhalten je Schema eigene Werte. So bleibt das Farbsystem konsistent und ein Wechsel erfordert keine Änderung an einzelnen Komponenten.
Barrierefreiheit
Ob ein dunkles Schema besser lesbar ist, hängt vom Menschen ab. Bei Lichtempfindlichkeit kann es entlasten, während manche Menschen mit Astigmatismus helle Schrift auf dunklem Grund als verschwommen wahrnehmen. Aus Sicht der BarrierefreiheitBarrierefreies Design bezeichnet die Gestaltung von Inhalten, Oberflächen und Produkten, die für möglichst viele Menschen nutzbar sind, unabhängig von Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen. Im Englischen spricht man von Accessibility. Gemeint ist nicht nur eine Rücksicht auf eine kleine Gruppe, denn Barrieren entstehen auch situativ, etwa durch grelles Sonnenlicht auf dem Display, eine gebrochene Hand oder eine laute Umgebung.…
Weiterlesen: Barrierefreiheit ist deshalb nicht ein einzelnes Schema die Lösung, sondern die Möglichkeit, zwischen beiden zu wählen.
Zusätzlich bieten viele Seiten einen Schalter an, mit dem Nutzende die Systemvorgabe überschreiben können. Wichtig ist, dass beide Schemata gleichwertig gestaltet und getestet werden, denn Inhalte, Bilder, Diagramme und eingebettete Elemente von Drittanbietern fallen sonst schnell aus dem Rahmen. Ein halbfertiger dunkler Modus wirkt schnell schlechter als gar keiner.