Darkmodus auf Webseiten deaktivieren, trotz Nutzung eines dunklen Themes

2002Andreas

Hallo @all.

Wenn man im Fx ein dunkles Theme verwendet, dann werde ja auch viele Webseiten mit dunklem Hintergrund angezeigt.

Ändere ich den config Eintrag

layout.css.prefers-color-scheme.content-override

werden Webseiten zwar wieder mit hellem Hg angezeigt, aber im Fx wird dann trotz dunklem Theme die Einstellungsseite etc. auch mit hellem Hg angezeigt.

Meine Frage also, kann man das verhindern, dass Webseiten mit dunklem Hg angezeigt werden, wenn ein dunkles Theme aktiviert ist?

Oder aber das die internen Seiten vom Firefox mit dunklem HG angezeigt werden, obwohl man den config Eintrag ändert?

Wäre das evtl. mit einem Script zu realisieren?

Für jegliche Hilfe vielen Dank vorweg.

universum123

moin

riecht jetzt bisschen nach Ot

Fx 96.0b2 Hintergrund in schwarz statt weiß

ich hab da lieber nicht mehr weiter nachgefragt

aber es ist schön das jetzt aus berufenen Mund zu hören

ich hoffe dein "Hilfeschrei" wird erhört und ich kann da auch von profitieren

ich werde es gespannt verfolgen

gruß uni

Mira_Belle

Ich fürchte fast, es muss auf die Codes von Endor zurückgegriffen werden.

En Heiden Arbeit würde dann auf "uns" warten, denke ich.

About Seiten mit CSS Codes anpassen

Klasse wäre es, wenn man mit einem Script Hintergrund, Schriftfarbe und noch ein paar kleinere Dinge

in einem Rutsch anpassen könnte.

Sören Hentzschel

Viel zu kompliziert gedacht. Man muss einfach nur die CSS-Variablen aus dem Theme kopieren (bekommt man eh direkt über den Inspektor) und in die Datei userContent.css packen, natürlich jeweils mit einem !important versehen. Das kann jeder halbwegs vernünftige Editor für alle Zeilen gleichzeitig ausführen.

Helles Theme (aktueller Nightly-Build als Basis):

CSS

:host,
:root {
    --in-content-page-color: rgb(21, 20, 26) !important;
    --in-content-page-background: #fff !important;
    --in-content-text-color: var(--in-content-page-color) !important;
    --in-content-deemphasized-text: rgb(91, 91, 102) !important;
    --in-content-box-background: #fff !important;
    --in-content-box-background-odd: rgba(12, 12, 13, 0.05) !important;
    --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
    --in-content-box-info-background: #f0f0f4 !important;
    --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent) !important;
    --in-content-item-hover-text: var(--in-content-page-color) !important;
    --in-content-item-selected: var(--in-content-primary-button-background) !important;
    --in-content-item-selected-text: var(--in-content-primary-button-text-color) !important;
    --in-content-icon-color: rgb(91, 91, 102) !important;
    --in-content-accent-color: #0a84ff !important;
    --in-content-accent-color-active: #0060df !important;
    --in-content-border-hover: var(--grey-90-a50) !important;
    --in-content-border-invalid: var(--red-50) !important;
    --in-content-border-color: #d7d7db !important;
    --in-content-error-text-color: #c50042 !important;
    --in-content-link-color: var(--blue-60) !important;
    --in-content-link-color-hover: var(--blue-70) !important;
    --in-content-link-color-active: var(--blue-80) !important;
    --in-content-link-color-visited: var(--blue-60) !important;
    --in-content-button-text-color: var(--in-content-text-color) !important;
    --in-content-button-text-color-hover: var(--in-content-text-color) !important;
    --in-content-button-text-color-active: var(--in-content-button-text-color-hover) !important;
    --in-content-button-background: rgba(207, 207, 216, .33) !important;
    --in-content-button-background-hover: rgba(207, 207, 216, .66) !important;
    --in-content-button-background-active: rgb(207, 207, 216) !important;
    --in-content-button-border-color: transparent !important;
    --in-content-button-border-color-hover: transparent !important;
    --in-content-button-border-color-active: var(--in-content-button-border-color-hover) !important;
    --in-content-primary-button-text-color: rgb(251, 251, 254) !important;
    --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color) !important;
    --in-content-primary-button-background: #0061e0 !important;
    --in-content-primary-button-background-hover: #0250bb !important;
    --in-content-primary-button-background-active: #053e94 !important;
    --in-content-primary-button-border-color: transparent !important;
    --in-content-primary-button-border-hover: transparent !important;
    --in-content-danger-button-background: #e22850 !important;
    --in-content-danger-button-background-hover: #c50042 !important;
    --in-content-danger-button-background-active: #810220 !important;
    --in-content-focus-outline-color: var(--in-content-primary-button-background) !important;
}

Alles anzeigen

Dunkles Theme (aktueller Nightly-Build als Basis):

CSS

:host,
:root {
    --in-content-page-background: rgb(28, 27, 34) !important;
    --in-content-page-color: rgb(251, 251, 254) !important;
    --in-content-deemphasized-text: rgb(191, 191, 201) !important;
    --in-content-box-background: rgb(35, 34, 43) !important;
    --in-content-box-background-odd: rgba(249, 249, 250, 0.05) !important;
    --in-content-box-info-background: rgba(249, 249, 250, 0.15) !important;
    --in-content-border-color: rgba(249, 249, 250, 0.2) !important;
    --in-content-border-hover: rgba(249, 249, 250, 0.3) !important;
    --in-content-border-invalid: rgb(255, 132, 139) !important;
    --in-content-error-text-color: #FF9AA2 !important;
    --in-content-button-background: rgb(43, 42, 51) !important;
    --in-content-button-background-hover: rgb(82, 82, 94) !important;
    --in-content-button-background-active: rgb(91, 91, 102) !important;
    --in-content-icon-color: rgb(251, 251, 254) !important;
    --in-content-primary-button-text-color: rgb(43, 42, 51) !important;
    --in-content-primary-button-background: rgb(0, 221, 255) !important;
    --in-content-primary-button-background-hover: rgb(128, 235, 255) !important;
    --in-content-primary-button-background-active: rgb(170, 242, 255) !important;
    --in-content-danger-button-background: #ff848b !important;
    --in-content-danger-button-background-hover: #ffbdc5 !important;
    --in-content-danger-button-background-active: #ffdfe7 !important;
    --in-content-table-background: rgb(35, 34, 43) !important;
    --in-content-accent-color: var(--in-content-primary-button-background) !important;
    --in-content-accent-color-active: var(--in-content-primary-button-background-hover) !important;
    --in-content-link-color: var(--in-content-primary-button-background) !important;
    --in-content-link-color-hover: var(--in-content-primary-button-background-hover) !important;
    --in-content-link-color-active: var(--in-content-primary-button-background-active) !important;
    --in-content-link-color-visited: var(--in-content-link-color) !important;
}

Alles anzeigen

2002Andreas

Zitat von Sören Hentzschel

Man muss einfach

Hallo Sören..

ganz herzlichen Dank dafür, funktioniert natürlich perfekt

universum123

nabend

muss dann eigentlich in

layout.css.prefers-color-scheme.content-override die 3 wieder eingestellt werden?

mfg uni

2002Andreas

Zitat von universum123

die 3 wieder eingestellt werden?

Nein.

Mit 2 wird die Funktion ja deaktiviert, und der Code färbt die about:seiten dunkel.

universum123

thx

Sören Hentzschel

Präziser:

0 - Dunkel

1 - Hell

2 - System-Theme berücksichtigen

3 - Browser-Theme berücksichtigen

3 ist neu seit Firefox 95 und seitdem Standard, 2 war vorher Standard.

Mira_Belle

Das verstehe wer will, aber ich muss den Code Dunkles Theme

in die userChromeShadow.css eintragen, damit es funktioniert.

Gruß

Mira

Zitat von Sören Hentzschel

Viel zu kompliziert gedacht. Man muss einfach nur ...

Vielen Dank !

Sören Hentzschel

Zitat von Mira_Belle

Das verstehe wer will, aber ich muss den Code Dunkles Theme
in die userChromeShadow.css eintragen, damit es funktioniert.

Das ist definitiv nicht notwendig und deutet eher darauf hin, dass du in deiner userContent.css-Datei einen Fehler hast, ab dem nachfolgendes CSS ignoriert wird.

Mira_Belle

Zitat von Sören Hentzschel

Das ist definitiv nicht notwendig und deutet eher darauf hin, dass du in deiner userContent.css-Datei einen Fehler hast, ab dem nachfolgendes CSS ignoriert wird.

Es ist aber egal an welche Stelle ich "Deinen" Code eintrage. Es tut sich nichts!

In der userChromeShadow.css tut er's.

Nachtrag!

Um ganz, ganz Sicher zu gehen habe ich meine alte userContent.css-Datei gesichert und

in eine Neue nur

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) 
{
    /*---------------------------------------------------*/
    /****     Anpassungen an den Einstellungsmenüs    ****/
    /*---------------------------------------------------*/

    :host,:root {
    --in-content-page-background: rgb(41, 44, 47) !important;
    --in-content-page-color: rgb(225, 225, 225) !important;
    --in-content-deemphasized-text: rgb(191, 191, 201) !important;
    --in-content-box-background: rgb(35, 34, 43) !important;
    --in-content-box-background-odd: rgba(249, 249, 250, 0.05) !important;
    --in-content-box-info-background: rgba(249, 249, 250, 0.15) !important;
    --in-content-border-color: rgba(249, 249, 250, 0.2) !important;
    --in-content-border-hover: rgba(249, 249, 250, 0.3) !important;
    --in-content-border-invalid: rgb(255, 132, 139) !important;
    --in-content-error-text-color: #FF9AA2 !important;
    --in-content-button-background: rgb(43, 42, 51) !important;
    --in-content-button-background-hover: rgb(82, 82, 94) !important;
    --in-content-button-background-active: rgb(91, 91, 102) !important;
    --in-content-icon-color: rgb(251, 251, 254) !important;
    --in-content-primary-button-text-color: rgb(43, 42, 51) !important;
    --in-content-primary-button-background: rgb(0, 221, 255) !important;
    --in-content-primary-button-background-hover: rgb(128, 235, 255) !important;
    --in-content-primary-button-background-active: rgb(170, 242, 255) !important;
    --in-content-danger-button-background: #ff848b !important;
    --in-content-danger-button-background-hover: #ffbdc5 !important;
    --in-content-danger-button-background-active: #ffdfe7 !important;
    --in-content-table-background: rgb(35, 34, 43) !important;
    --in-content-accent-color: var(--in-content-primary-button-background) !important;
    --in-content-accent-color-active: var(--in-content-primary-button-background-hover) !important;
    --in-content-link-color: var(--in-content-primary-button-background) !important;
    --in-content-link-color-hover: var(--in-content-primary-button-background-hover) !important;
    --in-content-link-color-active: var(--in-content-primary-button-background-active) !important;
    --in-content-link-color-visited: var(--in-content-link-color) !important;
    }
}

Alles anzeigen

eingetragen!

Und was soll ich sagen?

Es funzt nicht.

Ergo muss wohl an anderer Stelle der Wurm drin sein.

Nur wo?

Gruß

Mira

2002Andreas

Zitat von Mira_Belle

@-moz-document url(chrome://browser/content/browser.xhtml)

Und was hat der Eintrag mit der userContent.css zu tun

Sören Hentzschel

Vor allem war das ja zu keinem Zeitpunkt Teil meines Codes. Zum Testen sollte man den Code schon erst einmal einfach so übernehmen, wie er ist, bevor man selbst Dinge dazu schreibt. Der Code-Kommentar ist ebenfalls falsch. Es geht um keine "Einstellungsmenüs", sondern um die Farben der internen Firefox-Seiten.

.DeJaVu

/ot

Da macht Mozilla endlich mal was richtig, ist wieder nicht recht. Muss man nicht verstehen, wenn man unter Windows sich dark wünscht, und endlich macht ein Programm es richtig.

2002Andreas

Zitat von .DeJaVu

wenn man unter Windows sich dark wünscht

Ich möchte meine about Seiten im Firefox in dunkel wie gehabt, aber nicht die Websseiten.

Und nur weil mein Windows in dunkel ist, müssen es Webseiten ja nicht auch sein.

.DeJaVu

Aber das war der Sinn und Zweck dieser Einstellung. Vom System zum Browser. Mozilla hat es erfolgreich umgesetzt. Ich kann deinen Wunsch verstehen, aber dann schalt es doch in Windows wieder ab Hat eh keinen nennenswerten Vorteil, kannst du in jeder Studie nachlesen, dass "dark mode" allenfalls ein Hype ist, aber keinesfalls augenschonend ist* und sogar schädlich ist bei extremen Kontrasten, auf die sich das Auge jeweils einstellen muss. * auch wenn manch Benutzer meint, er könnte dadurch besser sehen, das ist mit Verlaub, echt Blödsinn, selbst bei Menschen mit einer Augenerkrankung, frag einfach deinen Augenarzt beim nächsten Besuch, ich hab's getan

2002Andreas

Zitat von .DeJaVu

schalt es doch in Windows wieder ab

Ich habe es extra eingeschaltet.

Ich will die Taskleiste in black

Ich will das Windowsmenü in dunkel

Ich will die about Seiten in dunkel

Ich will den Fx in dunkelt

Und ich will die Webseiten in hell.

Nicht mehr...aber auch nicht weniger

Zitat von .DeJaVu

Mozilla hat es erfolgreich umgesetzt

Dagegen habe ich ja auch gar nichts gesagt.

.DeJaVu

Meine Taskleiste ist Dunkelgrau, Farbe ist ein Blau. Dunkles HG-Bild. StartIsBack hat einen dunklen Hintergrund für die Listenansicht. Für Windows und Einstellungen hat sich ein heller Hintergrund bewährt. Explorer und co sind hell, das ist besser lesbar als dunkle Kontraste, Bunt kommt auch da bestens an. Alles unabhängig von Firefox. Vermutlich zeigen deine anderen genutzten Programme auch was dunkles an, falls sie es können und Sinn ergibt, das ist keine Voraussetzung, es können zu müssen, hat sogar effektiv Nachteile, wenn es um Grafikbearbeitung geht, daher kann PS und andere es gottlob nicht. Dunkle Menüleisten können Adobe, Office sowieso schon gefühlt ewig.

Ach ja, "dark mode" und exotische Einstellungen, lesen die eigentlich nicht die Änderungen durch, die Firefox anbietet?

How to change that nauseating color? • mozillaZine Forums

milupo

Tja, ähnlich wie bei Deutsche Welle Polen - Präsentation in Farbe und bunt!

2002Andreas 15. Dezember 2021 um 13:42