• Hallo Gast, du kaufst gerne günstig ein und erfährst oft vor deinen Freunden von interessanten Angeboten? Dann kannst du dein Talent als Schnäppchenjäger jetzt zu Geld machen und anderen PCGH-Lesern beim Sparen helfen! Schau einfach mal rein - beim Test der Community Deals!

[HowTo] Dark Mode für Webseiten & eigenes CSS verwenden

IICARUS

Kokü-Junkie (m/w)
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.

Chrome:

FireFox:

Opera:

Danke an @Tetrahydrocannabinol für den Nachtrag :

Sogar auch fürs Handy:

Es gibt auch das Addon "Stylus" z.B. für mein Opera.

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 <div class="meine_Klasse">
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.

Dann in Optionen folgendes einfügen:
CSS:
.p-body-inner {
    padding-right: 40px !important;
    padding-left: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.node--unread .node-title, .node-title {
    font-size: 18px !important;
    font-weight: 400 !important;
}


.block.block--messages {
    font-size: 16px !important;
}

.structItem-title {
    font-size: 18px !important;
}

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:

Ashampoo_Snap_Donnerstag, 10. September 2020_14h34m36s_011_.png

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.

Das war es dann auch schon und sieht dann hier im Forum so aus:

Ashampoo_Snap_Donnerstag, 10. September 2020_06h27m37s_009_.png Ashampoo_Snap_Donnerstag, 10. September 2020_06h27m20s_008_.png Ashampoo_Snap_Samstag, 12. September 2020_11h06m54s_001_.png Ashampoo_Snap_Samstag, 12. September 2020_11h09m08s_003_.png

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

Ashampoo_Snap_Donnerstag, 10. September 2020_14h36m37s_012_.png

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

Ashampoo_Snap_Donnerstag, 10. September 2020_14h37m50s_013_.png

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.

Ashampoo_Snap_Samstag, 12. September 2020_11h14m53s_004_.png

Muss aber z.B. im Opera einmal in den Einstellungen gesetzt werden, damit der Button im Browser eingefügt wird.
 
Zuletzt bearbeitet:

Jahtari

Software-Overclocker(in)
stylus gibt es für alle browser! okay... beim edge weiss ich es nicht genau - aber wer nutzt den schon. ;)
der vorteil ist: für viele seiten gibt es bereits fertige styles.
danke für den thread!

stylus für firefox:
 
Zuletzt bearbeitet:
TE
IICARUS

IICARUS

Kokü-Junkie (m/w)
stylus gibt es für alle browser! okay... beim edge weiss ich es nicht genau - aber wer nutzt den schon. ;)
Danach habe ich auch kurz gesucht, aber auf die schnelle nichts finden können.

Im allgemeinem finde ich es schade wenn überhaupt solch ein Addon genutzt werden muss, denn andere Seiten wie z.B. ComputerBase haben hierzu eine Auswahl.

Ashampoo_Snap_Samstag, 12. September 2020_11h29m48s_005_.png

Andere Foren wieder wie z.B. das Android Forum wo ich auch als Mitglied dabei bin bieten vier Sytles mit bereit.
1x Dark Mod Dynamische Breite​
1x Hell Dynamische Breite​
1x Dark Mod Statisch Breite​
1x Hell mit Statische Breite​

An der Textgröße muss ich weder was im Forum Luxx, noch bei ComputerBase und selbst im Adroid Forum was sogar selbst XenForo nutz nichts dran ändern. Die sind schon bereits gut bestimmt. Da ich Diabetes habe sind meine Augen bereits schon nicht die besten und muss für den Rechner eine Lesebrille verwenden. Hier nach der neuen Umstellung sind die Texte für mich in den Beiträgen so klein das ich mir noch eine Lupe vors Gesicht halten müsste oder die Skalierung des Brosers nutzen müsste. Mit der Skalierung hatte ich es anfangs auch zunächst gemacht, aber das vergrößert dann das ganze Forum in eine Größe was dann nicht mehr so schön ist.

Da ich mich hier lange aufhalte war daher dann das Addon die Lösung für mich, denn ich möchte mich in einem Forum auch wohl fühlen wenn ich es nutze. Im übrigem sind meine Deklarationen identisch mit denen aus dem Android Forum was die selbe Forensoftware verwendet.

Naja, wie auch immer, an manchem können wir nichts dran ändern, aber mit dem Addon können wir wenigstens doch noch was für uns selbst was bestimmen.

Das Thema ist aber jetzt nur auf die Addons bestimmt und falls jemand Probleme hat das CSS dazu zu bestimmen helfen wir hier gerne weiter.

Daher bitte KEINE Kommentare bezüglich der neuen Software was hier eingerichtet wurde!!!
Für Kritik, Anregung und Verbesserungsvorschläge bitte dieses Thema dazu verwenden!

 
Zuletzt bearbeitet:
TE
IICARUS

IICARUS

Kokü-Junkie (m/w)
Ach da haben wir dann auch was für den Edge und dem Safari. :D
Habe ich im ersten Beitrag mit aufgelistet. :)
 
Zuletzt bearbeitet:
Oben Unten