Freitag, 22. Oktober 2021
Dark Theme
Seit etwa einem Monat nutze ich nun im Backend das Dark Theme und gestehe gerne ein, dass der Umgang damit sehr angenehm ist. 😎 👍
Es kommen nun die Wintermonate und da habe ich wieder vermehrt Zeit um mich etwas um meinen Blog zu kümmern. In diesem Zusammenhang überlegte ich mir, wie ich Lesern einen Dark Mode im Frontend anbieten kann. Meine Überlegungen dazu sind ziemlich simpel. Ich brauche zwei verschiedene user.css-Files. Einmal das bestehende als Light-Mode und ein neues für Dark-Mode. Es stellt sich dann die Frage, wie der Leser die beiden Modi ein-/aus-/umschalten kann.
Da gäbe es bereits ein Seitenleisten-Plugin, mit dem man sich verschiedene Theme anzeigen lassen kann. Das betrifft dann jedoch nicht nur die user.css sondern auch alle Theme-spezifischen Dateien. Man müsste also zwei komplette Child-Theme erstellen (und aktuell halten). Das erscheint mir nicht so praktisch. Deshalb kam ich auf folgende Ideen:
- Eine einfachere Lösung wäre ein neues Seitenleisten-Plugin mit einem simplen, graphischen Umschalter. Klickt/tippt man darauf, wird ein Refresh durchgeführt und die hinterlegte user.css aktiviert.
- Noch schöner wäre eine Integration direkt in das Master-Theme. Wenn dieser CSS-Umschalter in die Menüleiste integriert werden könnte, dann wäre der grosse Vorteil, dass diese beim Seitenaufruf auch auf dem Mobile zuoberst erscheint und so direkt angewählt werden könnte (ohne dass man nach unten scrollen muss, bis dann die Seitenleisten-Plugins angezeigt werden).
Seit gestern besitze ich ein neues Smartphone und zwar ein Google Pixel 4a mit Android 12. In diesem Zusammenhang ist erwähnenswert, dass ich die Anzeige permanent auf Dark-Mode umstellen kann (was ich auch gemacht habe). Und das Interessante dabei ist, dass mir im Firefox-Browser nun gewisse Seiten ebenfalls, automatisch, Dark dargestellt werden (z.B. www.spiegel.de oder www.tagesanzeiger.ch). Es sieht also so aus, als ob der Seitenanbieter feststellen kann, dass der ankommende Leser den Dark-Mode aktiviert hat und eine demenstprechende CSS ausliefert. Das ist natürlich die Luxus-Lösung. (Mein Blog wird immer noch Light dargestellt, weshalb ich eben vermute, dass nicht der Browser auf Dark umstellt, sondern der Seitenbetreiber ein Dark-CSS ausliefert).
Wie auch immer. Ich wollte Dich einfach wissen lassen, dass ich diese Geschichte als Winter-Projekt im Kopf habe.
Um eine Dark-css werde ich nicht herumkommen und das wird doch einiges an Aufwand brauchen. Wie dann die Aktivierung/Umschaltung für den Frontend-Besucher wirklich erfolgen kann, das werde ich erst später angehen. Vielleicht können wir diesbezüglich ja ein paar Ideen austauschen.
Dieser Link ist nicht aktiv. Er enthält eine kopierbare Trackback-URI, um manuell ein Ping- und Trackback zu diesem Eintrag für ältere Blogsysteme zu generieren; zB (immer noch valide) über das zur Verfügung gestellte Eintragsfeld des serendipity_event_trackback Plugins. Serendipity und andere Blogsysteme erkennen die Trackback-URL heutzutage aber automatisch anhand der Artikel-URL. Die Trackback-URI für ihren Link des Sender-Eintrages lautet daher wie folgt: »https://www.blog.dokumenzi.ch/2664-Dark-Theme.html«
Kommentare
Ansicht der Kommentare: Linear | Verschachtelt
Ian Styx am :
Hört! Hört! 😎 Sehr wohl!
Das gibt es wohl, ABER es ist aus einer Zeit da sich die Themes in ihrer Struktur sehr ähnlich waren und eigentlich nur die Kleider gewechselt wurden. Nichts was man wirklich auf (s)einer Seite haben wollte. Schließlich ist man kein Gemischtwarenladen. Man wählt das Theme was am besten zu einem passt. Was soll denn der Besucher und davon 93% Bots da besser wissen?! IMHO gibt es nur einen einzigen validen Anwendungsfall: Wenn man ein Demo Blog betreibt, in dem es für die Besucher wichtig ist neue Kleider kennenzulernen.
Ich tendiere bei einem Dark-Theme dazu, alles in einem Theme und seinen styles bereits vorzuhalten. Dann kann man einen sehr einfachen SVG 🌞 / 🌚 Schalter bauen. der auf click, mittels javascript, einen class selector in den < html > tag schreibt, a la class="light-theme" (bzw nix) vs. class="dark-theme". Die zusätzlichen .dark-theme .beispielselector { } color styles sind bereits im üblichen "light" css load geliefert. und überschreiben die eigentlichen .beispielselector { } Auszeichnungen. Und das sind font: color, background-color, background-gradient color und border-colors. Mehr gibt es eigentlich gar nicht. Je aufgeräumter das Original Theme ist, desto einfacher ist es mit diesen Überschreibungen. Dann gibt es auch keinen Schluckauf bei switches zwischen den Zuständen durch klebrige gecachte styles und so fort.
Zu den Mobile-OS Systemen läßt sich sagen, dass diese in den neueren Versionen (inklusive der verwendeten Browser) - wie du es nun selbst erlebt hast - etwas mitbringen, das wie durch Zauberhand bereits Webseiten ohne einen eigenen Dark Mode mehr oder weniger gut übersetzt. Das muss man also unterscheiden. Webseiten die einen eigenen Dark Mode mitbringen und Systeme die helle Webseiten in einen solchen übersetzen (zb. um ein Gerät zu schonen, wie bei OLED und was dann auch Auswirkungen auf den Energiehaushalt hat. Je weniger hell, desto weniger Energieverbrauch. Ich meine es ist nicht der Seitenbetreiber der feststellt dass du Android X+ verwendest und deshalb alles ins Dunkel dreht, sondern die Einstellung Dark Mode im Android bzw des verwendeten Browser selbst inkl. der mobilen Styles Eigenschaften des Gerätes, ... meine ich. Obwohl es das natürlich auch geben kann.
https://stadt-bremerhaven.de/google-chrome-fuer-android-dark-mode-fuer-webseiten-automatisch/
https://support.google.com/chrome/answer/9275525?hl=de&co=GENIE.Platform%3DAndroid
Beat Post author am :
Das klingt alles sehr spannend. Vor allem der mittlere Abschnitt. Für mich heisst das wohl, dass ich besser noch etwas zuwarte. Wobei ich vermutlich eh nicht vor Dezember dazu komme um das Ganze anzupacken.
Ian Styx am :
Vermutlich!. Denn das automatische Umschalten mit Chrome - und ich habe es selbst natürlich gleich mal ausprobiert - ist für deine theme Farben eher ungeeignet.
Der eigentliche Faktor dieser Browser-eigenen Umschaltung ist, dass die Farben invertiert werden. Dies gelingt immer dann gut, wenn vorher konsequent schwarz auf weiß gearbeitet wurde. Sobald Farben und oder sogar gradients bzw farbige shadows usw hinzukommen wird es schnell unansehnlich und unbrauchbar.
Ian Styx am :
Zum Nikolaus gibts was zum Spielen! 😊
Beat Post author am :
🎅 JA, gerne! 🤶 Da freue ich mich drauf! 👍
Beat Post author am :
Zu Nikolaus geliefert, zu Weihnachten fertig! 👍
Noch einmal: Vielen Dank für Deine tolle Arbeit!