Dunkelmodus auf deiner Website: lohnt sich das oder ist es teure Mode?

Der Dunkelmodus kam in die Betriebssysteme, dann in die Apps, und seither steht er in fast jedem Briefing für Webdesign. Der Wunsch kommt meist in derselben Form: "Wir hätten gern einen Dunkelmodus, das wirkt moderner."

Genau in dieser Formulierung steckt das Problem. Der Dunkelmodus ist kein visueller Effekt, den man einschaltet, sondern ein zweites vollständiges Design, das entschieden, gebaut und parallel gepflegt werden muss. Auf manchen Seiten lohnt er sich, auf anderen ist er verbranntes Geld — und der Unterschied lässt sich begründen.

Der Mythos: "schont die Augen"

Das ist die meistgenannte Begründung und bestenfalls unvollständig. Für viele Menschen ist helle Schrift auf dunklem Grund schwerer zu lesen, nicht leichter: Um die Buchstaben entsteht ein Halo-Effekt, der die Kanten verwischt. Betroffen sind vor allem Menschen mit Astigmatismus — und das sind sehr viele.

Was stimmt: Bei wenig Umgebungslicht blendet ein heller Bildschirm, und dort ist der Dunkelmodus angenehmer. Auf OLED-Displays verbraucht er zudem etwas weniger Akku. Das sind echte, aber eng begrenzte Vorteile — sie machen den Dunkelmodus nicht allgemein überlegen.

Wann er sich lohnt

Das Muster ist ziemlich eindeutig: Der Dunkelmodus zahlt sich dort aus, wo Menschen lange auf den Bildschirm schauen — und vor allem dort, wo sie es nachts tun.

• Anwendungen und Dashboards, die jemand stundenlang beim Arbeiten offen hat.
• Digitale Produkte für technisches Publikum, wo die Erwartung etabliert ist und ihr Fehlen auffällt.
• Seiten mit langen Lesestrecken — Dokumentation, ausführliche Beiträge — die oft abends genutzt werden.
• Marken mit ohnehin dunkler Identität: Dort ist das dunkle Theme das primäre und das helle die Ergänzung.

Wann er sich nicht rechnet

Bei den meisten Unternehmenswebsites schlicht gar nicht. Eine Dienstleistungsseite wird zwei bis drei Minuten besucht, fast immer tagsüber, mit einer konkreten Entscheidung im Kopf. Das Design für diesen Besuch zu verdoppeln verändert keine einzige Conversion.

Was er wirklich kostet: nicht der Schalter

Den Umschalter zu bauen ist der leichte Teil. Der reale Aufwand steckt in allem, was doppelt entschieden und doppelt geprüft werden muss — dauerhaft.

• Jede Farbe der Palette braucht ein dunkles Pendant, und es ist kein "Invertieren": Markentöne verlieren auf Schwarz meist an Kontrast.
• Bilder mit weißem Hintergrund erscheinen als leuchtende Rechtecke, die im Dunkeln schweben.
• Das Logo funktioniert fast nie in beiden Themes; meist braucht es eine zweite Fassung.
• Schatten hören auf zu wirken. Im Dunkeln entsteht Tiefe über Helligkeitsebenen, nicht über Schatten.
• Jede neue Seite wird zweimal geprüft, und genau dort wird die Pflege dauerhaft.

Wenn du ihn machst: vier Entscheidungen, die fast alle Probleme vermeiden

Die technischen Details unterscheiden sich je nach Stack, die grundlegenden Entscheidungen sind in allen Fällen dieselben.

1. 01Respektiere standardmäßig die Systemeinstellung. Hat der Besucher auf dem Handy Dunkel gewählt, dräng ihm kein Hell auf.
2. 02Biete einen sichtbaren Umschalter und merk dir die Wahl. Wer wechseln will, will auf deiner Seite wechseln, nicht im System.
3. 03Nie reines Schwarz. Ein sehr dunkles Grau reduziert den Halo-Effekt und macht den Text deutlich lesbarer.
4. 04Senk die Sättigung der Markenfarben im dunklen Theme. Ein kräftiger Ton, der auf Weiß funktioniert, flimmert auf Schwarz meist unangenehm.

Kontrast lässt sich in keinem der beiden Themes improvisieren

Der häufigste Fehler beim Wechsel auf Dunkel ist, den Text in ein mittleres Grau zu setzen, "damit es nicht so hart wirkt". Das Ergebnis liegt unter dem lesbaren Mindestkontrast — und weil genau das alle ansehen, ist der Schaden groß.

Beide Themes müssen dieselben Kontrastminima erfüllen, und jedes muss einzeln geprüft werden: Dass Hell besteht, sagt nichts über Dunkel. Der Kern davon steht in barrierefreie Website: warum sie wichtig ist.

Wirkt er sich auf die Ladezeit aus?

Sauber umgesetzt kaum: Es sind Farbvariablen, keine zusätzlichen Ressourcen. Schlecht umgesetzt schon — wenn jedes Theme sein eigenes Stylesheet lädt oder wenn Bilder in heller und dunkler Variante dupliziert werden, ohne sie zu optimieren.

Dazu ein sichtbares Detail: Wird das Theme erst per JavaScript nach dem ersten Rendern gesetzt, sieht der Nutzer ein weißes Aufblitzen, bevor Dunkel erscheint. Das stört und beschädigt den Qualitätseindruck. Was bei der Geschwindigkeit wirklich zählt, steht in Core Web Vitals.

Das praktische Urteil

Baust du eine Unternehmenswebsite mit begrenztem Budget, bringen zehn Dinge mehr als der Dunkelmodus: Ladezeit, Texte, Leistungsseiten, Formulare, echte Fotos. Der Dunkelmodus gehört ans Ende dieser Liste, nicht an den Anfang.

Baust du dagegen etwas, das Menschen stundenlang benutzen, gehört er von Anfang an ins Gespräch — denn ihn nachträglich zu ergänzen, wenn Palette und Komponenten längst feststehen, kostet erheblich mehr, als ihn eingeplant zu haben. Die allgemeinen Spannen stehen in was eine professionelle Website kostet.