Nativer Dark Mode - Für das Linux Guides Forum

  • Schon vor Ewigkeiten, habe ich angekündigt endlich mal einen nativen Dark Mode für unser schönes kleines LinuxGuides Forum zu bauen. Heute Abend hatte ich endlich mal etwas Zeit dafür:

    Teaser:


    Was ist die Idee?

    Bei Gnome, KDE (ka welche Linux Desktops sonst noch), Windows und Mac OS kann man in den Systemeinstellungen zwischen einem "hellen" und "dunklen" Modus auswählen.

    Viele Webseiten können diese Einstellung, die ihr auf eurem Computer getroffen habt auslesen und zeigen euch dann ein helles oder dunkles Theme an. Das Theme, dass hier im LinuxGuides Forum installiert ist unterstützt diese Funktion leider nicht.

    Ich habe nun - basierend auf dem Standard LinuxGuides Theme - eine dunkle Version davon gebastelt (sie ist gerade mal 3kb gross). So installiert ihr die:

    Ihr müsst dazu das "Stylus" Addon in eurem Browser installieren:

    Achtung: Unter Linux funktioniert das Erkennen des Dark Mode nur im Firefox Browser. Da Google bzw das Chromium Team seit 3 Jahren einen einwandfrei funktionierenden Patch - damit auch Chromium basierte Browser das unter Linux nutzen können nicht akzeptiert... 🙄

    **EDIT: Ab Chromium / Chrome in Version 115 funktioniert das Addon auch bei Google Chrome bzw Chromium basierten Browsern einwandfrei **

    Wenn ihr das Addon installiert habt, könnt ihr auf diese Seite gehen. Und dort das Userstyle, dass ich für dieses Forum erstellt habe mit einem Klick über den "Install-Button" unterhalb vom Screenshot installieren.

    LinuxGuides Forum Dark Theme by kim88
    Wenn der Systemweite Dunkelmodus (Dark Mod) im Betriebssystem aktiviert ist, wird das LinuxGuides Forum dank dieser CSS Datei ebenfalls in einem dunklen Theme…
    userstyles.world

    Danach müsst ihr noch den Dark Mode in eurem System aktivieren - und dann sollte das alles automatisch funktionieren. Wenn ihr den Dark Mode wieder ausmacht, wird das Forum wie bisher angezeigt, wenn ihr ihn wieder anmacht in meinem gebastalten Dark Mode.

    Der komplette Code den ich hier geschrieben habe ist unter der GPLv2 lizenziert und kann auf GitHub eingesehen, geforkt, kopiert, etc werden:

    Link zum GitHub Projekt: https://github.com/srueegger/linuxguides-forum-dark-mode

    In der Readme Datei, steht auch ziemlich ausführlich wie man die CSS Datei selber kompilieren kann.

    Fehler und Probleme:

    Es wird definitiv noch Fehler geben. Ich habe bestimmt einige Elemente vergessen oder einfach nicht daran gedacht, und die sind dann noch nicht dunkel eingefärbt. Wenn ihr solche Elemente findet, könnt ihr da sgerne hier als Antwort oder als Issue in GitHub melden.

    Wichtig: Beim melden, am besten einen Screenshot und die genaue URL mitliefern

    Happy Dark Mode euch allen.

    --
    Ciao!

    Linux Nutzer seit über 20 Jahren. I ❤️ Freedom!

    Offizieller Proton-Botschafter aus der Schweiz 🇨🇭 😅

    Meine Haupt-Distribution ist Ubuntu.

    Mein Blog: https://rueegger.me

    Wer meinen sinnlosen Gedanken folgen möchte, kann dies gerne auf Mastodon tun: https://swiss.social/@srueegger

    2 Mal editiert, zuletzt von kim88 (22. Juli 2023 um 22:00)

  • Ich bin ehrlich gesagt kein grosser Fan der Dark-Reader Erweiterung.

    Hier sieht man warum. So sieht LinuxGuides mit Dark Reader aus:

    Hier passt Header und Logo mit dem Grün nicht mehr zusammen. Die grünen Links in der Chatbox und im Forum sind viel zu hell. Es ist insgesamt für mich einfach absolut kein stimmiges Gesamtbild.

    Dazu kommt noch, wenn Dark Reader aktiv ist, dann wird jede Webseite in einem Dark-Mode angezeigt unabhängig davon ob bei deinem System den Dark Mode gerade aktiv ist oder nicht. Und das will ich ja gerade nicht.

    Bei mir ist tagsüber, der helle Modus aktiv und Abends automatisch der dunkle Modus. Daher eine Erweiterung die die Webseite immer im Dark Mode anzeigt - oder wieder einen eigenen extra Schalter für An/Aus hat löst mein Problem nicht.

    --
    Ciao!

    Linux Nutzer seit über 20 Jahren. I ❤️ Freedom!

    Offizieller Proton-Botschafter aus der Schweiz 🇨🇭 😅

    Meine Haupt-Distribution ist Ubuntu.

    Mein Blog: https://rueegger.me

    Wer meinen sinnlosen Gedanken folgen möchte, kann dies gerne auf Mastodon tun: https://swiss.social/@srueegger

  • Dazu kommt noch, wenn Dark Reader aktiv ist, dann wird jede Webseite in einem Dark-Mode angezeigt unabhängig davon ob bei deinem System den Dark Mode gerade aktiv ist oder nicht. Und das will ich ja gerade nicht.

    es gibt doch den auto modus, der nutzt das system theme. Sonst würde ich es auch nicht nutzen.

    Rollenspiel.Monster -Deine Fediverse Rollenspiel Nodes

    GPG

    System: TUXEDO Aura 15 - Gen1, AMD Ryzen 7 4700U, 32GB RAM, 1TB M.2 SATAIII, EndeavourOS(Gnome[Wayland])

  • Kleines Update:

    Der Codeblock war noch nicht im Dark Mode:

    Vorher:

    Nachher:

    Die Änderung im Code sieht man in diesem Commit: https://github.com/srueegger/linu…9369999e83c01c5

    Und in den Dropdown Menüs gab es auch ein kleiner Fix:

    Vorher:

    Nachher:


    Die Änderungen im Code sieht man in diesem Commit: https://github.com/srueegger/linu…edf0edd7de0da9b

    Wenn ihr das Design über die Userstyles Webseite aktualisiert habt, update sich das automatisch.

    --
    Ciao!

    Linux Nutzer seit über 20 Jahren. I ❤️ Freedom!

    Offizieller Proton-Botschafter aus der Schweiz 🇨🇭 😅

    Meine Haupt-Distribution ist Ubuntu.

    Mein Blog: https://rueegger.me

    Wer meinen sinnlosen Gedanken folgen möchte, kann dies gerne auf Mastodon tun: https://swiss.social/@srueegger

  • Weitere kleine Updates:

    In der Forenübersicht, waren einige Links in der rechten Sidebar mit dem aktivierten Dark-Mode kaum lesbar:

    Vorher und Nachher:

    Die Links sind nun grün und dadurch lesbar. Die Code Änderungen sieht man hier: https://github.com/srueegger/linu…5e9a4bbe67dbd83

    Anpassungen bei der Suche

    Bei der Suche wurde direkt zwei Punkte angepasst.

    Ersten, war der Hover Effekt bei den Surchergebnissen noch gar nicht angepasst und extrem grell. 1. Bilder vorher, 2. Bild nachher:

    Die Änderung im Code sieht man hier: https://github.com/srueegger/linu…1f8f65833f42bbb

    Ebenfalls habe ich oben neben dem Suchbegriff das Select (Dropdown) Menü wo in den vorherigen Screenshot "Alles" drin steht noch angepasst:

    Die Änderung sieht man hier: https://github.com/srueegger/linu…302b680be3e516d

    Alle die das Style über die Userstyles Webseite installiert haben, werden ein automatisches Update bekommen.

    Ich verwalte den Code auf GitHub nun offiziell mit Releases - um hier einen besseren Überblick zu haben ist alles bis und mit hier die Version 1.0: https://github.com/srueegger/linu…k-mode/releases

    --
    Ciao!

    Linux Nutzer seit über 20 Jahren. I ❤️ Freedom!

    Offizieller Proton-Botschafter aus der Schweiz 🇨🇭 😅

    Meine Haupt-Distribution ist Ubuntu.

    Mein Blog: https://rueegger.me

    Wer meinen sinnlosen Gedanken folgen möchte, kann dies gerne auf Mastodon tun: https://swiss.social/@srueegger

  • Ich habe den ersten Beitrag überarbeitet.

    Das Bild zeigt nun eine aktuelle Version vom Layout (auch in Kombination mit dem neuen Grün im Forum).

    Zudem wurde der Hinweis zu Chromium basierten Browser überarbeitet, da Google Chrome & Co seit Version 115 ebenfalls den Dark Mode unter Linux beherschen.

    Zudem gab es mehrere kleinere Bugfixes im Userstyle: Konkret wären das diese hier: https://github.com/srueegger/linu…7354cb8780df993

    Alle die das Style über die Userstyles Webseite installiert haben, werden ein automatisches Update bekommen.

    --
    Ciao!

    Linux Nutzer seit über 20 Jahren. I ❤️ Freedom!

    Offizieller Proton-Botschafter aus der Schweiz 🇨🇭 😅

    Meine Haupt-Distribution ist Ubuntu.

    Mein Blog: https://rueegger.me

    Wer meinen sinnlosen Gedanken folgen möchte, kann dies gerne auf Mastodon tun: https://swiss.social/@srueegger

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!