Ob Microsoft, Apple oder Google – mittlerweile bieten alle großen Hersteller einen Dark Mode in ihrem Betriebssystem an. Diese Einstellung funktioniert sowohl auf dem Computer als auch auf Smartphone und Tablet. Apps wie Facebook, Telegram oder WhatsApp sind ebenfalls im Dunkelmodus nutzbar. Doch welche Vorteile hat der Dark Mode und wie lässt er sich in das moderne Webdesign integrieren?
Was ist der Dark Mode?
Android und iOS wie auch die meisten Apps und PC-Programme haben im Zuge der neuesten Updates und Versionen den Dark Mode ins System integriert. Mit diesem können die Anwender vom hellen in ein abgedunkeltes Design beim Bildschirm wechseln. Die Farben werden dabei umgekehrt, sodass alles Helle nun dunkel und alles Dunkle nun hell erscheint.
Einfach gesagt: Aktiviert der Nutzer bei seinem Smartphone oder Laptop den Dark Mode, erscheint der Hintergrund von systemeigenen Apps dunkel – und die Schrift ist weiß. Auch der Browser wechselt in das abgedunkelte Design, systemfremde Apps muss der User jedoch separat umstellen. Die meisten Websites werden ebenfalls nicht automatisch angepasst. In diesem Fall sieht der Nutzer eine Mischung aus heller Website und dunklem Menü.
Warum sollte man den Dark Mode nutzen?
Der Dark Mode wird immer beliebter – und das aus verschiedenen Gründen:
Angenehmer für die Augen: Zwar ist ein positiver Effekt auf die Sehfähigkeit nicht medizinisch belegt, allerdings ist der dunkle Modus vor allem abends und in dunklen Räumen weitaus angenehmer für die Augen als der grell weiße Bildschirm. Die dunkle Darstellung blendet weniger und eignet sich daher vor allem beim abendlichen Entspannen auf der Couch, für die Navigation bei nächtlichen Autofahrten oder bei langen Arbeitsphasen am PC in dunklen Räumen.
Accessibility und Barrierefreiheit: Websites werden für Menschen gemacht. Deswegen ist es wichtig, auch Personen mit einem Handicap ein einfaches Lesen zu ermöglichen, beispielsweise durch Schriftgrößen und höhere Kontraste. Diese Barrierefreiheit ist dank des „Kontrast-Modus“ möglich, der ähnlich funktioniert wie der Dark Mode. Nur hat der verdunkelte Modus den Vorteil, dass man ihn nicht vorher aktivieren muss, wie es beispielsweise beim Kontrast-Modus notwendig ist. Stattdessen lässt sich dank Funktionen in JavaScript oder Media Queries in CSS erkennen, ob der Nutzer bereits den Dark Mode auf seinem Gerät installiert hat.
Die Ästhetik: Viele Nutzer steigen derzeit auf das Farbschema des Dark Mode um, da es oftmals cleaner und zurückhaltender wirkt. Zudem lassen sich zahlreiche Inhalte durch den dunklen Modus eleganter darstellen, wodurch sich Websites von anderen abheben können. Dies liegt nicht zuletzt daran, da die Farben in dieser Einstellung kräftiger und leuchtender erscheinen, da der schwarze Hintergrund nicht die Aufmerksamkeit auf sich zieht, wie es zum Beispiel bei der Helligkeit des Light Modus der Fall ist.
Schont den Akku: Dark Mode gleich weniger Stromverbrauch? Nicht unbedingt. Nur bei einem OLED-Display, bei dem jedes Pixel einzeln leuchtet, spart das Gerät im Dunkelmodus Strom. Das Ergebnis: der Akku hält länger. Die meisten Smartphones sind jedoch mit einem LCD-Bildschirm ausgestattet, der weitaus günstiger ist als die OLED-Variante. Und beim LCD wird das gesamte Display beleuchtet, egal ob Light oder Dark Mode – sprich: es gibt keine Akku-Vorteile durch den dunklen Modus.
Der Dark Mode im modernen Webdesign
Ob macOS, Microsoft Windows oder Google Chrome – der Dark Mode schafft Abwechslung, bietet Barrierefreiheit, schont die Augen und verlängert bei ausgewählten Geräten die Akkulaufzeit. Eine Webseite, die automatisch zwischen Light und Dark Modus wechselt, trifft daher den Zahn der Zeit und weckt zudem die Neugier bei den Besuchern.
Dabei lässt sich der dunkle Hintergrund ganz einfach in die Website integrieren, beispielsweise mit CSS-Variablen. Mit einem Button hat der Nutzer so die Möglichkeit, vom Light zum Dark Modus zu wechseln. Zudem kann das System automatisch die Präferenzen des Besuchers berücksichtigen, sodass bei Seiten, die den Dunkelmodus unterstützen, dieser immer aktiviert wird.
Gerne unterstützen wir Sie dabei, den Dark Modus auch bei Ihrer Website zu integrieren.
Bildquellen:
- Night portrait of smiling man looking in smartphone on backgroun: © Lalandrew on Adobe Stock