Hintergrundfarbe für Menüs und shadow-root

Ich bin neu hier. Aber ich bin nicht ganz neu, wenn es um die Thunderbirdanpassung geht. Trotzdem ich habe ein großes Problem.

Ich möchte Farbeinstellung des TB anpassen. Deshalb benutze ich Inspector um zu finden, welche Selectors für diese Farben verantwortlich sind. Und jetzt mein Problem. Ich möchte schwarzen Hintergrund in allen Menüs haben. Ich habe gefunden, dass dieser Code

:is(panel, menupopup)::part(content) { display: flex; box-sizing: border-box; padding: var(--panel-padding); color: var(--panel-color); background: var(--panel-background); border-radius: var(--panel-border-radius); border: 1px solid var(--panel-border-color); width: var(--panel-width); min-width: 0; min-height: 0; /* Makes popup constraints work */ max-height: calc(100% - 2 * var(--panel-shadow-margin)); max-width: calc(100% - 2 * var(--panel-shadow-margin)); box-shadow: var(--panel-shadow); margin: var(--panel-shadow-margin); }

dafür verantwortlich ist. Ich habe sie hier gefunden:

chrome://global/skin/popup.css

Man braucht nur das:

background: var(--panel-background);

in

background: black !important;

zu ändern und dann haben wir schwarzen Hintergrund in allen Menüs. Aber so funktioniert nur im Inspector. Wenn ich das in Userchrome.css Datei einfüge, dann und dann TB wieder starte, dann der Hintergrund ist wieder grau oder weiß, abhängig, ob ich System Theme auto oder Dark theme ausgewählt habe.

Ich habe gefunden, dass im Inspector dieser Code steht hier:

#shadow-root (open)

und tiefer
<arrowscrollbox xmlns="http://www.mozilla.org/keymaster/gateke ... s.only.xul" class="menupopup-arrowscrollbox" part="arrowscrollbox content" exportparts="scrollbox: arrowscrollbox-scrollbox" flex ="1" orient="vertical" smoothscroll="false" scrolledtoend="true" scrolledtostart="true"><html:slot xmlns:html="http://www.w3.org/1999/xhtml"></html:sl ... wscrollbox>

Ich kann das nicht verstehen, was mache ich schlecht?

BS: Ubuntu 22.04
TB: 115.16.0esr 64 bit.

Quote from dharkness21

:root { --panel-background: black !important; }

Leider, das funktioniert nicht. Aber ich habe mein Problem anders gelöst. Und zwar:

:host,
:root {
--layout-background-0: light-dark(var(--color-white), var(--color-gray-90));
--layout-background-1: black !important;
--layout-background-2: light-dark(var(--color-gray-10), var(--color-gray-70));
--layout-background-3: light-dark(var(--color-gray-20), var(--color-gray-60));
--layout-background-4: light-dark(var(--color-gray-30), var(--color-gray-50));
--layout-color-0: light-dark(var(--color-black), var(--color-white));
--layout-color-1: #82d6ff !important;
--layout-color-2: light-dark(var(--color-gray-70), var(--color-gray-30));
--layout-color-3: var(--color-gray-50);
--layout-border-0: light-dark(var(--color-gray-30), var(--color-gray-70));
--layout-border-1: #82d6ff !important;
--layout-border-2: var(--color-gray-50);
}

und dann alle Menus (außer Burgermenu) haben schwarzen Hintergrund.

Für Burgermenu habe ich solche Code eingefügt:

panelview {
 flex-direction: column;
 background: black !important;
 padding: 0;
}

und auch Burgermenu hat jetzt schwarzen Hintergrund.