Dies ist die Geschichte, wie eine bewusst einfach gehaltene Vereinswebsite zu zwei Farbschemata, einer automatischen Screenshot-Testsuite und einer Korrektur kam, die nur für einen einzigen Browser gilt.
Als Mitglied des Vereins Repair Café Zug möchte ich meine Fähigkeiten einsetzen, um das Leben der Menschen in unserer Gemeinschaft ein kleines Stück zu verbessern. Als Webmaster der Vereinswebsite spüre ich dieselbe Verantwortung, wenn ich an der Website arbeite. Sie wird von unserer Gemeinschaft genutzt, und ich sollte dafür sorgen, dass sie für alle funktioniert, wo immer ich kann. Auch die statische Website eines kleinen Vereins kann mit viel Liebe so gestaltet werden, dass sie für die Besucher reibungslos funktioniert.
Die Website des Repair Café Zug ist für die Gemeinschaft da. Eines ihrer wichtigsten Ziele ist es, das Repair Café und die Website selbst für alle zugänglich zu machen.
Viele unserer Besucher sind älter und fühlen sich mit Technik nicht immer wohl. Wer ein teures neues Handy besitzt, soll die Website nicht besser erleben als andere. Manche Menschen nutzen strenge Datenschutzeinstellungen, die JavaScript abschalten, und niemand klickt sich gerne durch Cookie-Hinweise.
Deshalb wurde die Website von Hand mit minimalem HTML und CSS gebaut, ohne JavaScript und ohne Cookies. Sie hatte ein einziges Farbschema, sodass ein Durchgang durch alle Seiten genügte, um sie zu prüfen, und sie sollte überall gleich aussehen.
Dann wurde ich darauf hingewiesen, dass im Dunkelmodus Teile der Website nicht zu sehen sind.
Damals hatte ich kaum Erfahrung mit hellen und dunklen Farbschemata für eine einfache Website. Ich ging davon aus: Wenn ich nur einen Satz Farben festlege, verwendet der Browser genau diese Farben.
Diese Annahme war falsch. Manche Menschen mögen den Dunkelmodus sehr und stellen ihr Handy und ihren Browser so ein, dass alles dunkel angezeigt wird. Einige Browser können einen Dunkelmodus auch erzwingen, bei Websites, die selbst keinen haben. Dazu färben sie die Seite nach eigenen Regeln um.
Auf der Website des Repair Café Zug machte der erzwungene Dunkelmodus einiges falsch. Die beiden wichtigsten Bedienelemente waren kaum noch zu sehen: die Striche des Menüs (das «Hamburger»-Symbol oben) und der Pfeil unten, der Nächste Veranstaltungen öffnet.
| Wie gestaltet | Erzwungener Dunkelmodus |
|---|---|
|
|
|
|
|
|
Auch Bilder litten unter dem erzwungenen Dunkelmodus. Mehrere PNG-Bilder der Website waren sorgfältig als schwarze Linien auf transparentem Hintergrund gezeichnet. Wenn der Browser den Seitenhintergrund dunkel färbt, verschwinden die schwarzen Linien darin. Die Seite Sicherheitsprüfung zeigt das an den Symbolen der elektrischen Schutzklassen:
| Wie gestaltet | Erzwungener Dunkelmodus |
|---|---|
 |
 |
Die «Vorher»-Screenshots zeigen die Website vor jeder Arbeit am Dunkelmodus. Der erzwungene Dunkelmodus ist mit dem eingebauten Auto-Dark-Modus von Chromium simuliert, der Engine, auf der Samsung Internet aufbaut.
Es schien zwei Möglichkeiten zu geben:
color-scheme: only light.
Ich habe mich für den ersten Weg entschieden, obwohl er aufwendiger und schwieriger zu pflegen ist. Wer den Dunkelmodus wählt, verdient eine Website, die diese Wahl respektiert statt sie zu ignorieren.
Das erforderte einiges an Arbeit:
prefers-color-scheme: dark schaltet sie um
(in index.css).
image-invert-to-theme) geschrieben, der ein Bild nur im Dunkelmodus
invertiert. Dasselbe PNG mit schwarzen Linien auf transparentem Grund wird so zu
weissen Linien auf transparentem Grund.
Die Screenshot-Tests bestätigten, dass der neue Dunkelmodus funktioniert:
| Gestalteter Dunkelmodus | Invertiertes Symbol |
|---|---|
 |
 |
Anders als die übrigen Browser hat Samsung Internet nur den erzwungenen Dunkelmodus umgesetzt, der Farben nach ein paar einfachen Regeln ändert. Selbst wenn eine Website ihren eigenen, sorgfältig gestalteten Dunkelmodus anbietet, ignoriert ihn der Samsung-Browser. Er lädt das helle Design und dunkelt es dann nach seinen eigenen Regeln ab. Auf Samsung-Handys hat die ganze Arbeit am Dunkelmodus also nichts verändert. Die Menüstriche und der Pfeil waren immer noch fast unsichtbar.
Seit etwa fünf Jahren hat der Samsung-Browser in der einen oder anderen Form eine versteckte Einstellung, mit der er den eigenen Dunkelmodus einer Website respektiert. Sie heisst Adaptive Forced Dark Mode und ist standardmässig ausgeschaltet.
Ich habe kurz überlegt und getestet, den Besuchern einen Hinweis anzuzeigen, dass sie
diese Einstellung einschalten sollen. Das würde sowohl unsere Website verbessern als
auch alle anderen Websites, die in dieselbe Falle tappen. Aber unsere Besucher um eine
technische Einstellung zu bitten, ist keine realistische Option. Samsung hat
entschieden, das Design von Websites mit einem erzwungenen Dunkelmodus zu übersteuern,
auch dort, wo das nicht funktioniert. Die Website eines kleinen Vereins ist nicht der
Ort, um diese Unternehmensentscheidung zu korrigieren. (Wenn Sie den Samsung-Browser
verwenden, können Sie die Einstellung unter internet://flags#enable-adaptive-force-dark
einschalten.)
Damit blieben drei Möglichkeiten:
Weniger als 3% der Nutzer in der Schweiz verwenden den Samsung-Browser im Dunkelmodus. Das klingt nach wenig, bedeutet aber, dass vermutlich bei jeder Repair-Café-Veranstaltung ein paar Besucher die Website mit diesem Problem auf ihrem Samsung-Handy sehen.
Ich habe mich für Möglichkeit 3 entschieden. Wenn sich der Browser als Samsung Internet zu erkennen gibt, erhalten die wichtigen Bedienelemente, die sonst im Hintergrund verschwinden würden, einen weissen Rahmen. Alle anderen Browser erhalten genau dieselbe Seite wie bisher.
Selbst dann dunkelt der Samsung-Browser den weissen Rahmen zu Grau ab. 🙁 Aber die Bedienelemente sind jetzt sichtbar, und das ist für mich gut genug.
| Erzwungener Dunkelmodus, ohne Korrektur | Erzwungener Dunkelmodus, mit Samsung-Korrektur |
|---|---|
 |
 |
 |
 |
Bei all dem war ich auf ein zweites Samsung-Handy angewiesen, das ich zum Glück hatte. Das Problem tritt nur auf einem Samsung-Handy im Dunkelmodus auf, wenn die Website mit dem Samsung-Browser besucht wird. Firefox, Chrome, Brave und andere auf demselben Handy funktionieren einwandfrei. Die Screenshot-Tests können das Problem annähernd nachstellen, aber Samsungs genaue Regeln sind nicht öffentlich. Deshalb musste jede wichtige Änderung auf dem echten Gerät geprüft werden.
Das wichtigste Ziel der Website ist, für die ganze Gemeinschaft leicht zugänglich zu sein. Ein zweites wichtiges Ziel ist, dass sie einfach zu pflegen ist, damit sie auf Dauer aktiv und zugänglich bleibt.
Samsungs erzwungener Dunkelmodus stand dem ersten Ziel im Weg. Die Korrektur hat diese Last auf das zweite Ziel verlagert: Die Website hat jetzt zwei Farbschemata zu pflegen und eine Sonderlösung nur für Samsung. Das ist nicht ideal, aber ich denke, es ist die richtige Abwägung.
— Aner Ben-Artzi, Webmaster der Website des Repair Café Zug