Dark Mode für Webseiten & Eigenes CSS verwenden

  • Habe ihr Euch auch schon geärgert weil eine Seite kein Dark Mode mit anbietet? Dafür gibt es mittlerweile für fast jeden Browser ein Addon.

    Es gibt auch das Addon "Stylus" z.B. für mein Opera: Stylus-Erweiterung - Opera Add-ons


    Damit kann man auch eigenes CSS im Browser anwenden.
    Habe ich aber jetzt noch nicht verwendet oder ausgetestet.


    Mit den meisten Addons lassen sich sogar CSS-Deklarationen einer Seite bestimmen. Damit wird dann der eigene Browser das eigne gesetzte CSS verwenden. Lasst sich sehr gut einsetzten wenn z.B. eine Webseite keine Dynamische Fenster breite mit anbietet oder durch den Addblocker Werbung ausgeblendet wird und dadurch unschöne leere Spalten entstehen. Denn dort wo Werbung eingeblendet wird kann der Adblocker nur die Werbung ausblenden, aber nicht der Platz der dazu reserviert wird.


    Wie funktioniert das ganze?


    Mit HTML wurde früher im Code breites mit bestimmt wie der Eintrag ausgegeben werden soll. Als z.B. Textgröße, Rahmen, Breite usw. Das wird mit XHTML nun anders gelöst, denn früher musste ständig der HTML Code dazu bearbeitet werden. Heute mit XHTML wird nur die CSS-Deklaration bearbeitet die dann je Klasse entweder auf mehrere Positionen angesprochen wird oder auch einzigartige haben kann. Zum Beispiel kann ich eine Klasse mehrfach auf einer Webseite verwenden und dann wird diese überall mit dem CSS überall gleich ausfallen oder ich benenne nur eine Klasse damit und verwende sie dann nicht mehrfach.


    Hintergrund ist das heute XHTML5 mit Klassen arbeitet und jede Webseite hat so ihre eigenen Klassen als Ankerpunkte gesetzt. Daher wird diese Änderung nur dann angewendet wenn auf einer Webseite die selben Klassen wieder vorkommen. Da diese Klassen individuell jeder selbst bestimmt, wird nur ein Forum mit der selben Software davon betroffen sein. Daher können im Addon auch Domains eingetragen werden wo eigene CSS-Deklarationen nicht angewendet werden sollen.


    Die Klassen sehen dann z.B. so aus

    Als CSS wird dann folgendes gesetzt.

    CSS
    .meine_Klasse {
    font-size: 18px !important;
    }

    Dadurch wird dann an dieser Stelle dies Anweisung ausgeführt.


    Das ganze habe ich für ein Bestimmten Forum bereits in Verwendung, weil ich dort meine eigene Breite des Fensters haben möchte und auch der Text mir zu klein dargestellt wird. Das Forum hat leider keine mehrere Styles und bietet nur eine statische Breite an. Wobei das jetzt nur nebensächlich ist und ich es nur deshalb noch dazu nutze weil ich ehe eines dieser Addons für die Textgröße verwenden muss.


    Ich nutze ja den Opera und dass Addon was ich oben bereits verlinkt habe.
    Das Addon gibt es auch für andere Browser, musst mal dazu dann nach Dark Mode + Browser suchen.


    Dieser Beispiel bezieht sich auf das PCGH-Forum, da dort diese Klassen verwendet werden:


    Kurze Erklärung....
    1. "p-body-inner" => Setzt den linken und rechten Rand mit einem Abstand von 40px und lässt die Webseite in der Breite auf 100% zu. Dadurch wird aus der Statische Seite eine Dynamische Seite und recht und links werden 40px als Abstand gesetzt.


    Die nachfolgenden Deklarationen setzen den Titel der Startseite auf 18px und der Texte in Themen und Beiträge auf 16px.
    Sowie die Themenauflistung der einzelnen Foren auf 18px.


    2. "font-weight: 400" steht normal auf 600 und das ist mir zu dick gewesen, daher habe ich dieses auf 400 gesetzt.


    Im Addon sieht es dann so aus:


    Dieses "!important" ist für diese Darstellung notwendig, damit mit dem Addon das eigene CSS aus dem Browser erzwungen wird.
    Unter Dark Mode darüber nichts anklicken, dann bleibt der helle Style vorhanden.


    Man kann damit natürlich auch ein Dark Mode verwenden.
    Dazu müsstest du oben ein Hacken setzen.


    Das ganze spielt sich nur auf deinem Browser ab und kann jederzeit auch deaktiviert werden.
    Im Addon gibt es dann noch diesen Bereich:


    Damit kann man einfach eine Domain einfügen (mehrere Domains mit Komma getrennt) wo es nicht mit angewendet werden soll. In meinem Fall das Android Forum, da es die selbe Forensoftware beinhaltet und so die selben Klassen der CSS-Deklaration vorkommen.


    Das ganze kann dann auch mit einem Klick im Browser wieder deaktiviert werden.


    Muss aber z.B. im Opera einmal in den Einstellungen gesetzt werden, damit der Button im Browser eingefügt wird. Diese FAQ habe ich mal fürs PCGH-Forum erstellt, daher wird das Ganze mit unserem Forum nicht funktionieren, da unser Forum andere Klassen verwendet. Mit dem Browser können aber die Klassen einer Webseite ausgelesen werden.



    Bei uns sind aber auch dunkle Styles mit eingerichtet, so das es bei uns nicht notwendig ist selbst für die eigene Darstellung was zu bearbeiten.

    Aber mit dieser Methode ist es im Grunde mit allen Webseiten möglich.

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