Dark-Mode für diesen Blog

onli blogging

Dark-Mode für diesen Blog

Wednesday, 20. September 2023

Dieser Blog hat nun einen Dunkelmodus bekommen, der so aussieht:

Um den Vergleich später und im Feedreader einfach zu machen, das normale Design sieht derzeit so aus:

Wie das funktioniert hatte ich für PC-Kombo näher beschrieben. Es war hier sehr ähnlich, es musste relativ wenig CSS in die CSS-Datei hinzugefügt werden, das dann per Media-Query den Dark-Mode aktiviert und vorher gesetzte Farben mit dunkleren Alternativen überschreibt. Auffällig diesmal war, dass ich öfter unset und ein paarmal inherit benutzt habe um Farbdefinitionen aufzuheben. Für die Markup-Buttons beim Kommentarformular kam wieder filter: invert(100%) zum Einsatz, das RSS-Icon dunkelt ein filter: brightness(90%) ab.

Stilistisch ist der dunkle Modus ziemlich retro geworden. Das passt eigentlich nicht besonders zum Originaldesign, aber ich fand es hatte was, daher durfte es erstmal so bleiben.

Beim regulären hellen Design sind auch ein paar Farbdefinitionen neu. Beim Prüfen des Kontrasts für den Dunkelmodus – übrigens inzwischen komfortabel bei der Farbwahl in Firefox Entwicklerkonsole eingebaut – war mir aufgefallen, dass auch im bisherigen Design der Kontrast teilweise nicht ausreichend war. Beispielsweise war die Linkfarbe zu hell und der weiße Text der Navigationsbuttons oben rechts auf einem zu hellen Hintergrund (was bei gleicher Kombination beim Blogtitel durch dessen Größe funktioniert). Wo es mir auffiel habe ich nachgebessert. Außer einer besseren Lesbarkeit der Seite sollten diese Änderungen aber nicht auffallen.

Kommentare (2) | Trackback (1) | in Technikzeugs, about

Trackbacks

onli blogging am : Ein kurzer Blogrückblick auf 2023

Vorschau anzeigen
Letztes Jahr schrieb ich trotz Umzug relativ regelmäßig in diesen Blog. 2023 ähnelte sich da sehr: Wieder änderte sich einiges im Hintergrund, wieder war der Blog mir eine willkommene Konstante. Dieses Jahr habe ich 106 Artikel geschrieben. Da sind die L

Kommentare

Benedikt am :

*

Ist sehr schön geworden! Nutzt du den Dark Mode selbst auch? Mir ist der Light Mode eigentlich lieber, bin aber dazu übergegangen auf Smartphone und Tablet je nach Uhrzeit automatisch zwischen Dark und Light Mode zu wechseln und das passt es auch immer gut, wenn z.B. Websites mitziehen. Seit ich bei mir am Blog den Dark Mode eingeführt habe, sind jene Clients mit aktivem Dark Mode stark angestiegen (von 80/20 auf mittlerweile 60/40). Kann natürlich stark von der eigenen Zielgruppe abhängen, wäre jedenfalls spannend, wie die Verteilung bei dir aussieht.

onli am :

*

Danke! Ich war wegen der Retroanmutung etwas am Zweifeln.

Ich benutze den Darkmode auf meinem Telefon. Das habe ich damals günstig mit einem kleinen Sprung im Display gekauft, mit dem Plan es zu reparieren wenn es irgendwann zu störend werden sollte. Die Reparatur würde sich inzwischen kaum noch lohnen, und wenn der Displayinhalt dunkel ist sieht man den Riss auch gar nicht. Daher ist der Darkmode bei meinem Telefon permanent an. Da erzwinge ich das sogar mit dem Dark Reader, dem Firefox-Addon, auf allen Webseiten.

Auf dem PC, vor dem ich die meiste Zeit verbringe, lasse ich ihn im Browser weg. Ich hatte sogar im letzten Job die IDE nach einer Weile wieder auf ein helles Farbschema umgestellt. Editor und Terminal am eigenen PC ist noch solarized-dark, aber das ist mehr Trägheit, und vielleicht auch weil damit letzten Endes der Bildschirm gar nicht zu dunkel ist (der Editor geany färbt nur den Editorbereich ein, nicht die Seiten- und Menüleiste). Wobei, dass mir izulu jetzt nachts den Bildschirmhintergrund mit einem dunklen Wetterfoto auswechselt empfinde ich als sehr angenehm.

Wie die Leser das hier im Blog halten kann ich gar nicht messen. So wie es umgesetzt ist kommt es aus den Serverlogs nicht raus, und andere Analytics habe ich nicht. Wäre aber tatsächlich auch für mich eine interessante Statistik.


Kommentar schreiben

HTML-Tags werden in ihre Entities umgewandelt.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Umschließende Sterne machen ein Wort kursiv (*wort*), per **wort** wird es fett. [http://www.example.com Link] fungiert als URL-Tag.
 
 
Datenschutzerklärung