Dark Mode am Handy zerstört Website Farben: Was hilft wirklich?

In diesem Leitfaden konzentrieren wir uns, Talha Aslan und Team, auf genau eine Frage: Ihre Website bietet kein dunkles Design, trotzdem verändert das Smartphone eines Besuchers die Farben. Was tun Sie dann? Wir zeigen, wie Sie die Ursache bestätigen, welche Browsereinstellung das Verhalten auslöst und welche zwei CSS Eigenschaften das Problem dauerhaft lösen. Codeblöcke gibt es nicht; stattdessen wissen Sie danach genau, was Sie bei Ihrem Entwickler anfragen.

Welche Browser und Apps dunkeln Seiten von selbst ab?

Das bekannteste Beispiel ist Auto Dark Theme in Chrome für Android. Laut dem Artikel von Chrome Developers zu Auto Dark Theme greift die Funktion nur, wenn der Nutzer im Betriebssystem ein dunkles Design aktiviert hat. Dann legt Chrome ein automatisch erzeugtes dunkles Design über helle Websites. Zudem können Nutzer die Funktion im Betriebssystem oder in einer Chrome Einstellung abschalten.

Allerdings ist Chrome nicht die einzige Quelle. Einige andere mobile Browser bieten einen eigenen Dunkelmodus, der Seiten ebenfalls abdunkeln kann. Außerdem verändern manche E-Mail Apps und Browser innerhalb von Apps, also Webansichten in sozialen Netzwerken oder Messengern, die Farben auf ähnliche Weise. Das Verhalten hängt von der Version ab; deshalb empfehlen wir Tests auf echten Geräten.

• Chrome für Android: wenn das System ein dunkles Design nutzt und die passende Designeinstellung aktiv ist.
• Andere mobile Browser mit eigenem Dunkelmodus: abhängig von der Nutzereinstellung.
• E-Mail Apps: sie können Farben in Newslettern und Benachrichtigungen umkehren.
• Browser in Apps: Links aus sozialen Netzwerken behandeln das Gerätedesign teils anders.

Woran erkennen Sie, dass der Dark Mode am Handy Ihre Seite verfälscht?

Meist bemerken Sie das Problem über einen Screenshot von Kunden oder Kollegen. Am Desktop wirkt alles korrekt. Auf einem Android Smartphone zeigt dieselbe Seite allerdings völlig andere Farben. Deshalb lautet die Beschwerde oft „unsere Website ist am Handy kaputt“, obwohl die Seite intakt ist. Lediglich die Farben haben sich verändert.

• Ein dunkles Logo verschwindet fast vollständig auf dem abgedunkelten Hintergrund.
• Ihre Markenfarbe verblasst oder kippt in einen unerwarteten Ton.
• Text auf Bildern nähert sich dem Farbton des Fotos an.
• Formularfelder und Schaltflächen passen nicht mehr zum restlichen Layout.
• Schatten und feine Linien verschwinden, Karten fließen ineinander.

Kurz gesagt: Diese Symptome sind kein Zufall. Sie entstehen alle, weil der Browser neue Farben schätzt. Diese Schätzung gelingt bei manchen Elementen besser als bei anderen. Vor allem selbst gestaltete Farbverläufe, halbtransparente Ebenen und Bilder mit eingebettetem Text leiden darunter.

Warum verschwindet Ihr Logo im Dark Mode?

Diese Frage hören wir am häufigsten. Ihr Logo ist sehr wahrscheinlich eine PNG Datei mit transparentem Hintergrund in Dunkelblau oder Schwarz. Auf weißem Grund wirkt es scharf. Dann dunkelt der Browser die Seite ab, die transparente Fläche übernimmt den dunklen Hintergrund, und das dunkle Logo geht darin unter.

Der offizielle Chrome Artikel erklärt nicht im Detail, wie der Browser mit Bildern umgeht. Statt sich auf dieses Verhalten zu verlassen, sollten Sie daher ein Logo vorbereiten, das auf beiden Hintergründen funktioniert. Zum Beispiel halten Sie eine Version für helle und eine für dunkle Flächen bereit oder ergänzen eine feine helle Kontur. Geht es zusätzlich um Schärfe, hilft unser Beitrag zu unscharfen Logos und Bildern auf der Website.

1. Erstellen Sie zu Ihrem transparenten PNG Logo eine helle Version für dunkle Hintergründe.
2. Nutzen Sie ein SVG Logo, steuern Sie dessen Farben zentral.
3. Ein Logo in einer einfarbigen Fläche oder Box ist eine schnelle Übergangslösung.
4. Prüfen Sie jede Änderung erneut auf einem Handy im Dark Mode.

Wie diagnostizieren Sie das Problem in wenigen Minuten?

Zunächst bestätigen Sie, dass wirklich die automatische Abdunkelung die Ursache ist. Dieselbe Beschwerde kann nämlich auch von Caching, einer fehlenden CSS Datei oder der Browserübersetzung stammen. Mit der folgenden Reihenfolge kommen Sie meist schnell zu einem klaren Ergebnis.

1. Fragen Sie nach Handymodell, Browser und ob der Dark Mode aktiv ist.
2. Stellen Sie Ihr eigenes Android Gerät auf ein dunkles Systemdesign und öffnen Sie die Seite in Chrome.
3. Öffnen Sie dieselbe Seite danach mit hellem Systemdesign und vergleichen Sie beide Ansichten.
4. Tritt der Unterschied nur im Dark Mode auf, ist die automatische Abdunkelung die wahrscheinliche Ursache.
5. Bestätigen Sie das Ergebnis mit der Emulation in den Chrome DevTools am Desktop.

Somit stützt sich Ihre Diagnose auf einen wiederholbaren Test statt auf eine Vermutung. Zeigt sich der Fehler nur auf dem iPhone, lesen Sie unseren Beitrag zur fehlerhaften Darstellung in iPhone Safari. Wirkt die Seitensprache nach einer Übersetzung falsch, hilft unser Artikel dazu, warum Google die falsche Sprache erkennt.

Notieren Sie außerdem während der Diagnose Seite, Element und Einstellung für jedes Problem. Danach fällt der Vergleich vor und nach der Korrektur leicht, und diese Notizen bilden die Grundlage Ihrer Anfrage an den Entwickler.

Wie emulieren Sie den Dark Mode am Desktop?

Der Artikel von Chrome Developers beschreibt den Weg: Sie öffnen die DevTools, gehen über das Menü mit den drei Punkten zu More Tools und dann zu Rendering und aktivieren dort „Emulate auto dark mode“. So sehen Sie dieselbe Umwandlung ohne Handy. Folglich können Designer und Entwickler auf denselben Bildschirm schauen und darüber sprechen.

Trotzdem entspricht die Emulation nicht immer exakt einem echten Gerät. Deshalb erfolgt die finale Kontrolle auf einem echten Android Smartphone. Laut offiziellem Artikel aktivieren Sie dafür auf der Seite für experimentelle Chrome Funktionen das passende Flag und schalten dann in den Designeinstellungen die Option ein, dunkle Designs auf Websites anzuwenden. Menünamen ändern sich zwischen Versionen; suchen Sie also den entsprechenden Bereich in den Einstellungen.

Welche zwei Wege gibt es für eine dauerhafte Lösung?

Grundsätzlich haben Sie zwei Wege. Erstens teilen Sie dem Browser mit, dass Ihre Website nur hell funktioniert, und schalten die automatische Abdunkelung ab. Zweitens gestalten Sie ein eigenes dunkles Design, damit der Browser nichts mehr schätzen muss. Das Chrome Team empfiehlt übrigens selbst, lieber ein eigenes dunkles Design zu bauen, statt nur abzuschalten.

Bei der Entscheidung zählt, wie wichtig ein dunkles Design für Ihre Besucher ist. Diese strategische Frage behandeln wir ausführlich im Beitrag sollten Sie Dark Mode auf Ihrer Website anbieten; hier wiederholen wir sie nicht.

Was bewirkt die CSS Eigenschaft color-scheme genau?

color-scheme ist eine CSS Eigenschaft, die dem Browser mitteilt, welche Farbschemata eine Seite oder ein Element unterstützt. Laut dem Leitfaden auf web.dev wählen Sie damit die eingebauten Browserstile für Formularelemente, Scrollleisten und Systemfarben. Auf dem Wurzelelement beeinflusst die Eigenschaft außerdem den Seitenhintergrund und die Standardtextfarbe.

Laut MDN gibt es die Werte normal, light, dark sowie das Schlüsselwort only. Schreiben Sie zum Beispiel light und dark zusammen, signalisiert die Seite Unterstützung für beide Designs. Das Schlüsselwort only verbietet dem Browser dagegen, das Farbschema des Elements zu überschreiben. MDN nennt ausdrücklich, dass sich damit das Auto Dark Theme von Chrome abschalten lässt.

• normal: das Element folgt den Einstellungen der Seite.
• light: das Element kann im hellen Schema erscheinen.
• dark: das Element kann im dunklen Schema erscheinen.
• only light: das Element bleibt hell, der Browser wandelt es nicht um.

Wie schalten Sie die automatische Abdunkelung vollständig ab?

Laut offiziellem Chrome Artikel ergänzen Sie im Kopfbereich der Seite ein Metatag mit dem Namen color-scheme und dem Wert only light. Dann verzichtet der Browser komplett auf die Abdunkelung. Der Vorteil des Metatags liegt im Zeitpunkt: Der Browser liest es, bevor das CSS lädt. Somit vermeiden Sie auch ein kurzes dunkles Aufblitzen beim Laden.

Alternativ setzen Sie denselben Wert im CSS auf das Wurzelelement. Lädt die CSS Datei allerdings spät, zeigt der erste Bildaufbau unter Umständen noch die Umwandlung. Daher nutzen wir das Metatag als Hauptmethode und die CSS Regel als zusätzliche Absicherung. Ihre Anfrage an den Entwickler lautet also: Fügen Sie im gemeinsamen Kopfbereich ein Metatag ein, das nur das helle Schema erklärt.

1. Setzen Sie das Tag im gemeinsamen Kopfbereich aller Vorlagen, nicht auf einer einzelnen Seite.
2. Leeren Sie nach der Änderung den Cache Ihres Caching Plugins.
3. Testen Sie erneut auf einem Handy im Dark Mode und in der Emulation.
4. Speichern Sie Screenshots, damit Sie später vergleichen können.

Prüfen Sie außerdem nach dem Einbau, ob irgendwo auf Ihrer Website noch alte Regeln für ein dunkles Design mit prefers-color-scheme existieren. Andernfalls entsteht womöglich eine unerwartete Mischung.

Lässt sich nur ein einzelner Bereich schützen?

Ja. MDN und der Chrome Artikel erklären beide, dass Sie den Wert only light auch gezielt auf einzelne Elemente anwenden können, um sie von der Umwandlung auszunehmen. Zum Beispiel erlauben Sie die Abdunkelung auf der ganzen Website, schützen jedoch den Logobereich, den Rahmen um Produktfotos oder ein Aktionsbanner mit wichtiger Markenfarbe.

Allerdings braucht dieser Ansatz Sorgfalt. Ein weißer Kasten mitten auf einer abgedunkelten Seite wirkt auf manche Besucher wie ein Fehler. Deshalb sollten Sie den Schutz einzelner Bereiche nur für kleine, sinnvolle Flächen nutzen. Als Grundregel gilt: Entweder bleibt die gesamte Seite hell, oder Sie bauen ein echtes dunkles Design.

Wann hilft prefers-color-scheme und wann reicht es nicht?

prefers-color-scheme ist ein CSS Media Feature, das erkennt, ob Besucher auf ihrem Gerät ein helles oder dunkles Design gewählt haben. Damit legen Sie eigene Farben für Besucher mit Dark Mode fest. Der Leitfaden auf web.dev empfiehlt, color-scheme für die Standardansicht und prefers-color-scheme für die gestaltbare Ansicht zu nutzen, und zwar beide zusammen.

Der Chrome Artikel enthält allerdings eine wichtige Warnung: prefers-color-scheme schaltet die Abdunkelung nicht ab. Dunkeln Sie damit nur einige Elemente ab, zeigen Browser ohne Auto Dark Theme womöglich eine halb dunkle, halb helle Seite. Anders gesagt: Wenn Sie auf diese Abfrage setzen, planen Sie ein vollständiges dunkles Design.

Worauf achten Sie bei einem eigenen dunklen Design?

Ein eigenes dunkles Design ersetzt die Schätzung des Browsers durch Ihre eigenen Gestaltungsentscheidungen. Farben einfach umzukehren reicht deshalb nicht. Sie müssen jede Farbe vor einem dunklen Hintergrund neu bewerten. Die folgende Liste enthält die Punkte, die in Beispielszenarien am häufigsten untergehen.

• Dunkelgraue Hintergründe statt reinem Schwarz wirken eventuell angenehmer; testen Sie das selbst.
• Legen Sie einen helleren Ton Ihrer Markenfarbe für dunkle Flächen fest.
• Bereiten Sie Logo, Icons und Bilder mit Text auch für dunkle Hintergründe vor.
• Achten Sie darauf, dass Rahmen und Fokusanzeigen in Formularen deutlich bleiben.
• Prüfen Sie, ob Trennlinien in Tabellen erhalten bleiben.
• Setzen Sie color-scheme auf light dark, damit auch der Browser Bescheid weiß.

Messen Sie zudem im dunklen Design den Kontrast jedes Text und Hintergrundpaars. Dafür eignet sich unser Kontrastrechner. Die grundsätzliche Rolle von Kontrast erklärt unser Beitrag zu Kontrast im Webdesign.

Warum leiden Formulare und Schaltflächen besonders?

Formulare sind bei automatischer Abdunkelung der empfindlichste Teil. Der Browser ändert Hintergrund und Rahmen von Eingabefeldern nach eigenen Regeln. Ihre selbst gewählten Farben kollidieren dann womöglich mit diesen Regeln. Am Ende steht hellgrauer Text in einem weißen Feld oder ein Platzhaltertext, der auf dunklem Grund verschwindet.

Bei Schaltflächen sieht es etwas anders aus. Ist Ihre Markenfarbe bereits dunkel, dunkelt der Browser sie eventuell weiter ab oder verschiebt sie in einen ganz anderen Ton. Prüfen Sie deshalb wichtige Schaltflächen wie Kontakt, Angebot anfragen oder In den Warenkorb gesondert. Konkret genügen wenige Minuten, um Beschriftung und Rahmen in beiden Designs zu kontrollieren.

• Vergleichen Sie Feldhintergrund und Textfarbe.
• Prüfen Sie, ob Platzhaltertext auf dunklem Grund verschwindet.
• Testen Sie Farben von Fehler und Erfolgsmeldungen in beiden Designs.
• Kontrollieren Sie Browserelemente wie Checkboxen und Auswahllisten.

Was passiert mit Text auf Bildern und Hintergrundfotos?

Eine Überschrift auf einem Hintergrundfoto wirkt im hellen Design oft einwandfrei. Ändert der Browser jedoch die Textfarbe und lässt das Foto unberührt, verschwindet weißer Text auf einem hellen Foto. Auch das Gegenteil kommt vor: Eine abgedunkelte halbtransparente Ebene macht das Foto viel dunkler als geplant.

Am zuverlässigsten hilft es, Text nicht direkt ins Bild einzubetten. Nutzen Sie stattdessen eine Ebene zwischen Text und Foto, die Sie selbst steuern. Bereiten Sie außerdem Banner und Aktionsgrafiken mit Text auch für dunkle Hintergründe vor. Dann erreicht Ihre Botschaft den Leser, egal was der Browser tut.

Bei Produktfotos zeigt sich ein ähnlicher Effekt. Freigestellte Fotos auf weißem Grund wirken auf einer abgedunkelten Seite wie helle Kästen. Das ist zwar kein Fehler, stört aber das Gesamtbild. Ein feiner Rahmen oder ein leichter Kartenhintergrund hält somit beide Designs ordentlich.

Greift die Abdunkelung auf jedem Handy im Dark Mode?

Nein. Laut offiziellem Chrome Artikel greift die Funktion nur, wenn der Nutzer ein dunkles Systemdesign aktiviert hat, und er kann sie im System oder in Chrome abschalten. Zwei Besucher mit demselben Handymodell sehen Ihre Website also je nach Einstellung in völlig unterschiedlichen Farben.

Das erschwert die Diagnose. Beispielszenario: Die Inhaberin kann das Problem nicht nachstellen, weil ihre eigene Einstellung aus ist, während ein Kunde ein fehlendes Logo sieht. Schließen Sie das Thema deshalb nicht mit „bei mir funktioniert es“. Aktivieren Sie stattdessen die Einstellung bewusst auf Ihrem Gerät und stellen Sie das Problem nach.

Erklärt Ihre Website die Unterstützung eines dunklen Designs bereits über color-scheme, braucht der Browser außerdem keine eigene Umwandlung. Auch der Leitfaden auf web.dev hält fest, dass color-scheme eigenmächtige Umwandlungen durch den Browser verhindert. Korrekte Angaben machen das Verhalten also vorhersehbar, unabhängig von den Einstellungen einzelner Besucher.

Wann lösen Sie Fehler durch den Dark Mode am Handy nicht allein?

Nutzen Sie ein fertiges Theme und dürfen den Kopfbereich bearbeiten, ist das Metatag relativ schnell ergänzt. Pagebuilder Plugins, geschlossene Themes und über Jahre gewachsenes eigenes CSS machen die Aufgabe jedoch schwieriger. Tritt der Fehler zudem nur in bestimmten Vorlagen auf, kostet die Ursachensuche schnell Stunden.

Wenn Sie ohnehin eine Firmenwebsite erstellen lassen oder Ihre bestehende Seite grundlegend erneuern, planen Sie beide Designs am besten von Anfang an. Das ist deutlich gesünder als spätere Flickarbeit. Unser Team übernimmt diese Planung, wenn Sie bei uns eine Firmenwebsite erstellen lassen: Logoversionen, Farbvariablen und eine Testliste legen wir gleich zu Beginn fest.

Wo nehmen Sie die Änderung in einem fertigen Theme vor?

Arbeiten Sie mit einem Content Management System, ändern Sie den gemeinsamen Kopfbereich aller Seiten, nicht jede Seite einzeln. Die meisten Themes bieten dafür ein Feld in den Theme Einstellungen, ein Plugin oder eine Datei im Child Theme. Menünamen unterscheiden sich je nach Theme; suchen Sie also den passenden Bereich im Backend. Sind Sie unsicher, arbeiten Sie zuerst auf einer Testumgebung.

Zudem überschreiben Theme Updates Änderungen, die Sie direkt im Hauptthema vorgenommen haben. Halten Sie dauerhafte Änderungen daher im Child Theme oder im Bereich für eigenen Code, den Ihr Theme anbietet. Leeren Sie danach den Cache des Caching Plugins und eines eventuellen CDN. Sonst testen Sie die alte Version und ziehen falsche Schlüsse.

1. Erstellen Sie zuerst ein Backup der Website.
2. Nehmen Sie die Änderung auf einer Testumgebung vor und testen Sie sie.
3. Ergänzen Sie das Metatag im gemeinsamen Kopfbereich.
4. Leeren Sie den Cache und prüfen Sie auf einem Handy im Dark Mode.
5. Passt alles, übertragen Sie die Änderung auf die Live Website.

Andererseits unterstützt Ihr Theme womöglich schon beide Designs. Dann genügt eventuell das Einschalten der Option. Logo und Bilder bleiben trotzdem Ihre Aufgabe. Egal wie ausgereift das Theme ist: Die dunklen Varianten Ihrer Markenelemente liegen in Ihrer Verantwortung.

Mit welcher Checkliste prüfen Sie das Ergebnis?

Bestätigen Sie die Korrektur nicht anhand eines einzigen Screenshots. Die automatische Abdunkelung wirkt in verschiedenen Vorlagen unterschiedlich. Gehen Sie die folgende Liste mindestens für Startseite, eine Leistungsseite, das Kontaktformular und einen Blogbeitrag durch.

1. Öffnen Sie die Seite in Chrome auf einem Android Handy mit dunklem Systemdesign.
2. Prüfen Sie Logo, Menü und Fußbereich.
3. Füllen Sie das Formular aus und kontrollieren Sie, ob Fehlermeldungen lesbar bleiben.
4. Sehen Sie sich Text auf Bildern und Aktionsbanner an.
5. Öffnen Sie dieselben Seiten erneut mit der Emulation in Chrome am Desktop.
6. Bestätigen Sie, dass sich mit hellem Systemdesign nichts verändert.

Prüfen Sie danach den allgemeinen Zustand Ihrer mobilen Ansicht mit unserem Test auf Mobilfreundlichkeit. Fehler durch den Dark Mode am Handy machen oft weitere kleine mobile Probleme sichtbar.

Beeinflusst der Dark Mode Fehler SEO und Conversions?

Es gibt keine offizielle Aussage, dass die automatische Abdunkelung ein direktes Rankingsignal ist; deshalb behaupten wir das nicht. Dennoch schaden unlesbarer Text und unsichtbare Schaltflächen der Nutzererfahrung. Finden Besucher den Kontaktknopf nicht oder können Preise nicht lesen, verlassen sie die Seite eher.

Kurz gesagt: Die Wirkung ist indirekt und hängt von Ihrer Website ab. Beispielszenario: Ein Dienstleister nutzt seine Markenfarbe für den Anrufknopf, und im Dark Mode verschmilzt der Knopf mit dem Hintergrund. Besucher übersehen ihn, also kommt kein Anruf und keine Anfrage zustande. Solche Verluste untersuchen Sie in Ihrer Webanalyse mit einer Aufschlüsselung nach Gerät und Browser.

Vergleichen Sie dafür die Zeiträume vor und nach der Korrektur mit derselben Aufschlüsselung. Ein einzelner Monat beweist allerdings wenig, denn auch Kampagnen, Saison und Traffic Quellen prägen das Ergebnis. Lesen Sie das Resultat daher als Tendenz, nicht als exakten Gewinn.

Welche Fehler sollten Sie vermeiden?

Manche schnelle Lösung verschlimmert das Problem. Gehen Sie deshalb die folgenden Punkte durch, bevor Sie loslegen. Jeder davon taucht in Beispielszenarien häufig auf, und jeder lässt sich leicht verhindern.

• Einige Elemente mit prefers-color-scheme abdunkeln und annehmen, das schalte die Umwandlung ab.
• Das Metatag nur auf der Startseite einfügen und andere Vorlagen vergessen.
• Nur ein transparentes PNG Logo behalten und sich auf die Hintergrundfarbe verlassen.
• Nur in der Desktop Emulation testen und kein echtes Handy nutzen.
• Das Ergebnis bewerten, bevor Sie den Cache geleert haben.
• Besucher bitten, den Dark Mode abzuschalten; damit verlagern Sie Ihr Problem auf sie.

Welchen Weg sollten Sie am Ende wählen?

Haben Sie eine akute Beschwerde, ergänzen Sie zuerst das Metatag, das nur das helle Schema erklärt. Damit stoppt die automatische Abdunkelung sofort. Danach bereiten Sie eine Logoversion für dunkle Hintergründe vor, denn in anderen Browsern sehen Besucher womöglich trotzdem eine andere Ansicht. Langfristig bietet ein eigenes dunkles Design die beste Balance aus Markenkontrolle und Besucherwunsch.

1. Heute: automatische Abdunkelung mit dem Metatag stoppen.
2. Diese Woche: Logo und Bilder mit Text für dunkle Hintergründe vorbereiten.
3. Danach: Farben als Variablen organisieren, damit Sie beide Designs zentral steuern.
4. Geplantes Projekt: eigenes dunkles Design gestalten, testen und color-scheme auf beide Schemata erweitern.

Möchten Sie das umsetzen, ohne Ihren bestehenden Code zu beschädigen, lohnt sich Unterstützung. Bei unserem Webdesign erarbeiten wir Farbvariablen, Logoversionen und Testliste gemeinsam mit Ihnen. Zeigt Ihr Kontaktformular zudem einen Captcha Fehler, hilft unser Beitrag zu reCAPTCHA und der ungültigen Domain für den Websiteschlüssel.