{"id":421,"date":"2021-09-06T11:20:49","date_gmt":"2021-09-06T11:20:49","guid":{"rendered":"https:\/\/erdbeerbeet.com\/?p=421"},"modified":"2021-09-06T11:21:59","modified_gmt":"2021-09-06T11:21:59","slug":"dark-mode","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/dark-mode","title":{"rendered":"Dark Mode"},"content":{"rendered":"\n

Der Dark Mode ist inzwischen kein neues Thema mehr, aber allm\u00e4hlich ist er fast \u00fcberall eingebaut. Betriebssysteme, Apps und Webseiten bieten dem Benutzer die Wahl zwischen dem normalen Light Mode mit dunkler Schrift auf hellem Untergrund, oder aber dem Dark Mode mit dunklem Hintergrund und heller Schrift.
Sieht schick aus und soll angeblich Augen und Akku schonen.<\/p>\n\n\n\n

Gibt es messbare Vorteile des Dark Mode? Wie kann man ihn \u00fcberhaupt nutzen? Und welche Herausforderungen gehen mit dunklem Design einher?<\/p>\n\n\n\n

Ressourcen<\/h2>\n\n\n\n

Ein sch\u00f6ner, detaillierter (englischsprachige) Beitrag ist “A complete Guide to Dark Mode on the Web” von Adhuham<\/a>, beleuchtet die Techniken, die zur vorbildlichen Umsetzung des Dark Mode eingesetzt werden.<\/p>\n\n\n\n

Wie \u00fcblich werde ich an dieser Stelle gerne erg\u00e4nzen.<\/p>\n\n\n\n

Vorteile und Irrglaube<\/h2>\n\n\n\n

Befeuert wurde die Nutzung des Dark Mode von der Behauptung, dass er die Augen schonen und Akku sparen soll.<\/p>\n\n\n\n

Tats\u00e4chlich hat die Farbe, in der unser Auge vom Display beleuchtet wird keine Auswirkung auf irgendwelche Sehschw\u00e4chen. Eine schlechte Lesbarkeit von Inhalten ist nicht unbedingt auf einen hellen oder dunklen Modus, sondern eher auf schlechte Kontraste zur\u00fcck zu f\u00fchren.
Die in Verbindung gebrachte Kurzsichtigkeit und juckende Augen r\u00fchren tats\u00e4chlich vom Display an sich her. Dem wenigen Blinzeln und der zu kurzen Distanz zum Ger\u00e4t. Der verwendete Modus ist dabei unerheblich.<\/p>\n\n\n\n

An der Aussage mit dem Akku sparen ist zumindest teilweise etwas dran. Der grunds\u00e4tzliche Gedanke ist, dass mehr dunkle Pixel weniger Strom verbrauchen. Sofern man aber kein OLED-Display im Einsatz hat, leuchten auch schwarze Pixel. Es gibt aber entsprechend einen Vorteil f\u00fcr die OLED-Nutzer, was immerhin jeden zehnten betrifft<\/a>.<\/p>\n\n\n\n

Um am Abend mit dem schwindenden Sonnenlicht umzugehen haben viele Systeme die M\u00f6glichkeit, bei Sonnenuntergang oder einer fest definierten Uhrzeit den Modus umzuschalten. Abgesehen von den fehlenden Vorteilen kommt hier allerdings hinzu, dass das Auge gut 20 Minuten ben\u00f6tigt, um sich an die andere Farbgebung vollends zu gew\u00f6hnen.<\/p>\n\n\n\n

Einen tats\u00e4chlichen Vorteil gibt es allerdings, wenn ein Display im Dunkeln genutzt wird. Hier blendet der Light Mode, w\u00e4hrend der dunkle Modus weniger Licht verstreut. Allerdings bin ich kein Anh\u00e4nger davon, ohne angemessene Beleuchtung am Ger\u00e4t zu sitzen…<\/p>\n\n\n\n

Einstellungen<\/h2>\n\n\n\n

Der Dark Mode kann an mehreren Stellen aktiviert werden.<\/p>\n\n\n\n

Inzwischen bieten fast alle Ger\u00e4te an, direkt das Betriebssystem<\/strong> auf hellen oder dunklen Modus einzustellen. Das geht mit dunklen Bedienelementen und anderen Hintergrundbildern einher. Diese Einstellung kann von Anwendungen abgefragt und umgesetzt werden, damit das Erscheinungsbild einheitlich bleibt.<\/p>\n\n\n\n

Anwendungen<\/strong> setzen h\u00e4ufig ihren eigenen Dark Mode um. Meist wird die Einstellung des Betriebssystems abgefragt und\/oder der Benutzer beim ersten Aufrufen gefragt. Hier bekommt der Nutzer h\u00e4ufig sogar eine ganze Auswahl von verschiedenen Farb-Themes.<\/p>\n\n\n\n

Interessant wird es noch einmal f\u00fcr Webseiten<\/strong>. Der Browser als Anwendung hat inzwischen ebenfalls einen dunklen oder hellen Modus eingestellt, den die jeweilige Seite abrufen kann. Meist wird dem Benutzer aber noch zus\u00e4tzlich angeboten, diesen umzuschalten. (Hier \u00fcbrigens mit dem Mond-Symbol unten rechts – ein WordPress-Plugin).<\/p>\n\n\n\n

Dunkles Design<\/h2>\n\n\n\n

Will man nun einen Dark Mode f\u00fcr seine Anwendung umsetzen, dann gen\u00fcgt es nicht, einfach die Farben zu invertieren. Eine \u00dcbersicht bietet der oben verlinkte Beitrag. <\/p>\n\n\n\n

Der Mensch und sein Auge sind grunds\u00e4tzlich daran gew\u00f6hnt, dunkle Schrift auf wei\u00dfem Grund zu lesen. F\u00fcr umgekehrte Farben bietet es sich an, die Schrift etwas dicker zu machen.
Sowohl im Light wie auch im Dark Mode sollte auf reines Wei\u00df und Schwarz verzichtet werden. Lieber ein off-white und dunkles grau oder blau.
Und beim Umkehren der Farben darauf achten, dass ungewollte Effekte wie wei\u00dfe Schatten entstehen k\u00f6nnen.<\/p>\n\n\n\n

Ebenso wichtig – und h\u00e4ufig \u00fcbersehen – sind eingebundene Bilder. Wenn diese besonders hell sind stechen sie im Dark Mode umso mehr hervor. Es ist also angebracht, einen Filter \u00fcber solche Bilder zu legen, um sie abzudunkeln.<\/p>\n\n\n\n

Fazit<\/h2>\n\n\n\n

Der Dark Mode ist in erster Linie eine Frage des Geschmacks. Und h\u00e4ngt davon ab, ob man als User sein Display im Dunkeln benutzt oder ein OLED-Display hat.<\/p>\n\n\n\n

Konkrete Umsetzungen gibt es hier f\u00fcr Flutter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Den Dark Mode gibt es nun schon eine ganze Weile. Trotzdem gibt es noch immer unbekannte Fallstricke in seiner Implementierung und Irrt\u00fcmer bez\u00fcglich seiner Vorteile.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[31],"class_list":["post-421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","tag-dark-mode"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":true}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=421"}],"version-history":[{"count":13,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/421\/revisions"}],"predecessor-version":[{"id":434,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/421\/revisions\/434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}