Das Spiel mit hell und dunkel

Rein zufällig ist mir aufgefallen, dass die »Wortwei.de« keine gute Figur macht, wenn jemand den „Dark Mode“ seines Browsers nutzt.

Eigentlich ist das keine besondere Herausforderung. Es gab schlicht keinen entsprechenden Eintrag in der Vorlage der Webseite, weil es mir persönlich bisher entgangen war, dass Browser das zur Webseite durchreichen können. Wobei sich zwar durchaus die Frage stellt, ob jeder Mist mitgemacht werden muss.

Doch in diesem Fall muss ich einräumen, dass mir die Option des „Wechseln könnens“ durchaus ein höchst persönliches Bedürfnis befriedigt. Als echte Herausforderung entpuppte sich das Hintergrund-Bild. Relativ schnell war klar: Das muss im „Dark Mode“ weg. Der Weg war der Richtige, das Ergebnis — in den ersten Iterationen – unbefriedigend.

Es scheint daran zu liegen, dass ein Löschen von Hintergrundbildern am html-Tag mit background-image:none von den Browsern ignoriert wird. Wird das Bild am body-Tag verankert, funktioniert es wie erwartet. Allerdings ist die seitenfüllende Anzeige des Bildes damit erheblich komplexer.

Die Lösung lautet nach einigem Herumprobieren „Bild weg“, damit sowohl der „hell“ als auch „dunkel“-Modus befriedigend funktioniert. Doch das Bild ist eine charakteristische Eigenschaft, also Teil des Wiedererkennungseffekts der Seite. Daher kam – nach einigen Fehlversuchen – die Lösung als „letzte Option“ daher (lt. Murphy war das zu erwarten): Wenn „deaktivieren“ scheitert – wie sieht es mit „ändern“ aus?

Nun: So, wie es jetzt aussieht, wenn der Browser im „Dark Mode“ Webseiten anzeigt. Damit dass sowohl als auch mit den Hervorhebungen, den Schaltern, etc. adequat aussieht, sind diese Einstellungen ein wenig nachjustiert. Was womöglich noch verfeinert wird – soweit Unstimmigkeiten auffallen.

Aus „Bequemlichkeitgründen“ fand das Herantasten im Live-Betrieb der Webseite statt. Falls also irgendwer heute das Gefühl hatte: »BUOA! – die Seite ist ja richtig psychodelisch« – daran lag das…

Warum „live“? → Weil Versuche sich bequem simultan auf dem Mobiltelefon testen lassen…