Das Forum hier im Dark-Mode?

[GS-Dirgi]

Das geht tatsächlich und evtl. einfacher als Du denkst.
So könnte das aussehen:


Wie geht das?

Schaue mal in Deinem Browser, ob es dafür die Erweiterung "Stylus" gibt. Lade diese dann herunter und aktiviere sie.​

Ich benutze den Brave Browser (ein Google Chrome Derivat) - Somit sollte die Erweiterung schon mal für alle auf der Chrome Engine basierenden Browser funktionieren (ich glaube selbst Edge von Mikkischrott basiert auf Chrome).​

Für andere Browser (Firefox, Safari etc.) einfach mal schauen, vielleicht gibt es dort das gleiche oder hat einen anderen Namen. Es muss halt eine Erweiterung sein, mit der man CSS Styles in einer Webseite bearbeiten kann.​

Was macht die Erweiterung:

Sie ändert im Prinzip das Aussehen der Seite (so wie Du es möchtest) ohne, das sie die original Seite ändert. Nur für Dich wird die Seite anders aussehen, solange DU es möchtest.​

Es hat keinen Einfluss auf die Seite und du machst dort nichts kaputt.​

Wenn Du Stylus installiert hast, starte es:
Das sieht dann so aus (hier stehen schon Einträge drin - bei Euch ist es noch leer)


Unter 1:
Trägst Du nun die Adresse der Homepage ein, auf der Die Erweiterung angewendet werden soll: also www.gs-forum.eu

Unter 2:
muss nun der Code hinein kopiert werden, damit die Homepage in Zukunft im Darkmode erscheint.
Natürlich kannst Du jeden anderen CSS Code auch hinein kopieren oder Deinen eigenen erstellen.
Dieser Code hier wurde mit einer KI generiert und funktioniert schon ganz gut. Vielleicht musst Du hie und da noch etwas feintunen an der Optik.

Zum Abschluss nur noch speichern und ab sofort erscheint die Forum Seite im Dark Mode bis Du es wieder deaktivierst.

Hier ist der Code:

Spoiler: Klicke zum ausklappen des Codes

/* --- ULTIMATIVER DEEP-DARK MODE FÜR GS-FORUM.EU --- */

/* 1. RADIKALE BASIS-ABDUNKLUNG */
html, body, .p-pageWrapper, .p-sectionMain, .p-body, .p-body-inner,
div, section, header, footer, article, aside {
    background-color: #121212 !important;
    background-image: none !important;
    color: #b0b0b0 !important;
    border-color: #2a2a2a !important;
}

/* 2. INHALTS-BOXEN & LINIEN-FIX (Tabellen & Trenner abdunkeln) */
.block-container, .block-header, .block-footer, .block-body, .block-row,
.structItem, .message-inner, .message-cell, .p-breadcrumbs,
.p-header, .p-nav, .p-navSticky, .p-nav-inner, .p-footer, .offCanvasMenu-content,
.block-separator, .message-main, .message-user, .p-body-sideNav, .p-body-sidebar,
.dataList-cell, .dataList-row, .table, .table td, .table th, .dataList {
    background-color: #1c1c1c !important;
    color: #d1d1d1 !important;
    border-color: #333333 !important; /* Dezentes Grau für alle Rahmen */
    box-shadow: none !important;
}

/* 3. DER ULTIMATIVE PAGINATION-FIX (VOR, ZURÜCK, ZAHLEN) */
.pageNav-page,
.pageNav-jump,
.pageNav-prev,
.pageNav-next,
.pageNav-main > li,
.pageNav-main > li > a,
.button.button--link,
a.pageNav-prev,
a.pageNav-next,
.pageNav .button {
    background-color: #2a2a2a !important;
    color: #64b5f6 !important;
    border: 1px solid #444444 !important;
    background-image: none !important;
    text-shadow: none !important;
}

/* Aktive Seite */
.pageNav-page.pageNav-page--current,
.pageNav-main > li.pageNav-page--current > a {
    background-color: #444444 !important;
    color: #ffffff !important;
    border-color: #64b5f6 !important;
}

/* Hover für die Navigation */
.pageNav-page:hover, .pageNav-jump:hover, .pageNav-prev:hover, .pageNav-next:hover,
.pageNav-main > li > a:hover, .pageNav .button:hover {
    background-color: #3d3d3d !important;
    color: #ffeb3b !important;
}

/* 4. BLOCK-OUTER & STATUSBEREICH */
.block-outer, .block-outer-main, .block-outer-opposite, .js-threadStatusField {
    background-color: #121212 !important;
    color: #d1d1d1 !important;
}

/* 5. EDITOR & OVERLAYS */
.bbWrapper, .message-content, .fr-wrapper, .fr-toolbar, .input, .js-editor,
.overlay-content, .menu-content, .select2-dropdown {
    background-color: #222222 !important;
    color: #f0f0f0 !important;
    border: 1px solid #3a3a3a !important;
}

/* 6. LOGO & ALLGEMEINE LINKS */
a { color: #64b5f6 !important; }
.button, .button--primary { background-color: #333333 !important; color: #ffffff !important; border-color: #444 !important; }
.p-header-logo img { filter: invert(0.8) brightness(0.8); }

[COLOR=rgb(224, 224, 224)]

 

[Eckart]

Das geht tatsächlich und evtl. einfacher als Du denkst.

Vielen Dank für Deine Mühe. Tatsächlich verwende ich vorzugsweise den dunklen Modus, wo verfügbar. Weil das oft nicht gegeben ist, hatte ich mir in Firefox das Add-On Dark Reader installiert, das zwar grundsätzlich funktioniert, aber weil es die Farben schematisch ändert, produziert es oft nur mäßige Darstellungen mit schecht aufeinander abgestimmten Farben, weswegen ich es dann doch meist deaktiviert lasse.
Das von Dir vorgeschlagene Add-On ist auf jeden Fall der bessere Ansatz für Webseiten, die nicht selbst ein dunkles Farbmodell bereitstellen, allerdings muss man es ja selbst mit einem passendes Farbmodell füttern. Zumindest auf den allerersten Blick funktioniert es mit Deinen CSS-Daten sogar - vielen Dank füs Teilen.
Allerdings ...

ab sofort erscheint die Forum Seite im Dark Mode bis Du es wieder deaktivierst.

Aber so ganz fehlerfrei arbeitet es wohl nicht. Klicke ich Links in der linken Spalte an, erscheint die angewählte Seite im hellen Farbmodell, auch nach einem Aktualisieren weiterhin. Gilt aber nicht für alle Links. Ich beobachte das einfach mal. Vielleicht gibt es ja noch Optimierungsmöglichkeiten.

 

[GS-Dirgi]

Ja, das musst Du noch ein bißchen "feintunen"

Wenn Du dich damit ein bißchen beschäftigen möchtest......
Benutze am besten zB die KI von Google, den Copiloten etc., kopiere dort den CSS Code hinein und beschreibe ihm, wo er noch Änderungen durchführen soll.
(Habe das auch mit der KI erstellen lassen - Die darin enthaltenen "Beschreibungstexte" hat die KI selber hineingesetzt und so benannt "bester", "ultimativer" etc.
Das kam immer dann, wenn ich ihm sagte da passt immer noch was nicht, bitte verbessern.... )

Das klappt ganz gut, benötigt hie und da noch ein paar Ansätze - einfach wieder den neu generierten Code nehmen und testen, ob es so funktioniert.
Stimmt, den Dark Reader hatte ich früher auch mal - jetzt wo Du es sagst - Aber ich hatte da auch immer das Problem, das er teiweise Farbe änderte wo dann die Webseite
nicht mehr so gut abgestimmt war.

Vielleicht magst Du ja dann den feingetunten Code hier dann einfach einfügen.

Die Idee dafür kam tatsächlich aus dem neuen Nachbarforum, wo Jemand den Wunsch äußerte, das neune Beiträge für ihn farblich besser erscheinen.

Ich habe dann einfach mal die KI gefragt und die kam dann gleich um die Ecke mit Stylus etc.
Dort sieht es dann so aus: Noch nicht gelesene Texte erscheinen grün und der eigene Name (wo man etwas gepostet hat wird hervorgehoben.

Hier der Code für die Farbspielereien - Sollten auch hier in diesem Forum funktionieren:

/* --- 1. UNGELESENE BEITRÄGE GRÜN & FETT --- */
.structItem.is-unread .structItem-title a {
    color: #27ae60 !important;
    font-weight: bold !important;
}

/* --- 2. GELESENE BEITRÄGE (Normal) --- */
.structItem:not(.is-unread) .structItem-title a {
    font-weight: normal !important;
}

/* --- 3. GS-DIRGI GRÜN MARKIEREN --- */
[data-user-id="12345"],
.username[data-user-id="12345"],
a[href*=".12345/"] {
    color: #d214e5f7 !important;
    font-weight: bold !important;
}

Damit auch der eigenen Username seine Farbe ändern, muss dort im Code wo jeweils "12345" steht, die eigene ID eingetragen werden.
Die erfährt man, wenn man mit der Maus über seinen Namen geht, dann erscheint unten am Bildschirm der Link mit dem Usernamen am Ende und einer Zahl, das ist die (eigene) User ID.