Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

Neddy

Hallo zusammen,

ich versuche, mein Thunderbird-Design mit einer userChrome.css anzupassen – leider mit gemischtem Erfolg.

Was bisher funktioniert:

✅ Farbverlauf im Hintergrund der Kopfzeile (Nachrichtenbereich)
✅ Farbgestaltung der Startseite (Account Central)

Was nicht oder nur teilweise funktioniert:

❌ Schriftart auf Arial Black wird nicht überall übernommen
❌ Farbverlauf im Ordnerbereich links (Mailkonten & Ordner) greift nicht
❌ Scrollbalken lassen sich nicht wie früher zweifarbig gestalten
❌ In der Kopfzeile sind Texte wie „Von“, „Betreff“, „An“ nur schwach sichtbar
❌ Das kleine Dreieck links neben „Von“ zum Einklappen der Kopfzeile fehlt

Ich nutze Thunderbird, Version 141.0. Die Datei liegt korrekt im Profilordner unter /chrome/userChrome.css, und toolkit.legacyUserProfileCustomizations.stylesheets ist auf true.

Ich habe bereits mit Microsoft Copilot daran gearbeitet und viele Varianten getestet, aber bei den oben genannten Punkten kommen wir nicht weiter. Hat jemand eine funktionierende Lösung oder aktuelle Selektoren für Thunderbird Supernova?
Alle funktionierende Code, die ich vom Forum erhielt, machen seit einigen Tagen bedauerlicherweise Probleme.

Ich bin von der Version 141.0 sogar zurück auf 128.13.0 durch die Wiederherstellung zu einem früheren Zeitpunkt gegangen, in der Hoffnung, dass dort die alten CSS's greifen. Das brachte auch keinen Erfolg.

Ich freue mich über jeden Hinweis oder Beispielcode – gerne modular, damit ich gezielt testen kann.

Neddy

Mapenzi

Hallo,

da wir nicht wissen welche Code du bisher für die von dir erwähnten Bereiche der GUI benutzt, wäre es nützlich, dass du den Inhalt deiner userChrome.css Datei hier anzeigst. Ein Screenshot deines Hauptfensters kann auch nicht schaden, wenn du private Daten unlesbar machst

Zitat von Neddy

Das kleine Dreieck links neben „Von“ zum Einklappen der Kopfzeile fehlt

Ist mir unbekannt. Bitte ein Bild zeigen.
Oder meist du vielleicht den Pfeil > links im Nachrichten-Header Bereich? Dieser Pfeil erscheint nur, wenn man die Erweiterung CompactHeaders installiert hat.

Zitat von Neddy

Hat jemand eine funktionierende Lösung oder aktuelle Selektoren für Thunderbird Supernova?

Die Selektoren lassen sich mittels des Entwickler-Werkzeugkastens ermitteln.
Lösungen kann man nur dann vorschlagen, wenn man weiß was du wo ändern willst.

dharkness21

Zitat von Neddy

Scrollbalken lassen sich nicht wie früher zweifarbig gestalten

Das geht nur noch über ein Javascript ** und es sind auch noch Vorbereitungen * nötig.

*
Hier die Erklärung was man genau machen muss, und die benötigten Dateien dazu:

https://github.com/Endor8/userChrome.js ... userChrome

Die Anleitung ist zwar für Firefox, kann aber eins-zu-eins für Thunderbird übernommen werden.

**

JavaScript

// Scrollbar.uc.js

"use strict";
/* Firefox userChrome.js tweaks - 'Custom Scrollbars' for Firefox ************************************************************ */
/* Original by Aris (aris-addons@gmx.net)************************************************************************************* */
/* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js
/* *************************************************************************************************************************** */
/* Customized by Mira********************************************************************************************************* */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ ****************************************** */
/* Scrollbar.v1.0.6.js    https://www.camp-firefox.de/forum/thema/135133/?postID=1207718#post1207718************************** */
/* https://www.camp-firefox.de/forum/thema/136152/?postID=1222989#post1222989************************************************* */
/* Scrollbar.v2.0.2.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223096#post1223096************************** */
/* Scrollbar.v2.0.3.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223124#post1223124************************** */
/* Scrollbar.v2.0.5.js    https://www.camp-firefox.de/forum/thema/136167/?postID=1223143#post1223143************************** */
/* Scrollbar.v2.0.6.1.js  https://www.camp-firefox.de/forum/thema/136167/?postID=1223162#post1223162************************** */
/* *************************************************************************************************************************** */
/* Custom Scrollbars for Firefox ********************************************************************************************* */
/* Version: 2.0.6.1 for Firefox 111+ ***************************************************************************************** */
/* ******************************************************************************************************************************

README

  about:config >
    widget.windows.overlay-scrollbars.enabled > false (Windows)
    widget.gtk.overlay-scrollbars.enabled > false (Linux)
  [!] The above preferences have to be set to 'false' for this code to work

  [!] DER STARTUP-CACHE MUSS NACH JEDER ÄNDERUNG GELÖSCHT WERDEN!
  -> Ordner 'startupCache' finden: Adressleiste > about:profiles > Lokales Verzeichnis > Ordner öffnen > startupCache
  -> Firefox schließen
  -> Inhalt des 'startupCache'-Ordners löschen

  Alternativ mit einem JavaScipt!
  -> https://github.com/Endor8/userChrome.js/blob/master/Firefox%2087/RestartFirefoxButtonM.uc.js

  Anpassungen vornehmen > Werte ändern
  - Optionen aktivieren/deaktivieren: true <-> false
  - Farbe
    - Name: red, blue, transparent
    - Hexcode: #33CCFF, #FFF
    - rgb(a): rgba(0,0,255,0.8)
    - hsl(a): hsla(240,100%,50%,0.8)
  - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
  - Deckkraft (in Dezimalzahlen): 0.0 bis 1.0 z.B. 1.4 oder 1.75
  - Farbverläufe: linear-gradient(direction, color, color, color)
  - Beispiel für Farbverläufe: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
  - vordefinierte Farbverläufe: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
  - keine Farbe oder keine Farbwerte -> verwende "unset"

  218 -         max-width: ${custom_scrollbar_size_value}px !important;
  222 -         max-height: ${custom_scrollbar_size_value}px !important;
*/
/* *************************************************************************************************************************** */
(function() {

  // PROFILE PHATH "CALCULATE"
  let ProfileDirectory = PathUtils.toFileURI(PathUtils.join(PathUtils.profileDir, 'chrome', 'icons'));
  // GENERAL SCROLLBAR SETTINGS
  const custom_scrollbar_size_value = 17;               // in px // default: custom_scrollbar_size_value = 17
  // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
  const custom_scrollbars = true;                       // default: custom_scrollbars = true
  const custom_scrollbar_arrows = true;                 // default: custom_scrollbar_arrows = true
  const cs_thumb_border = 0;                            // default: cs_thumb_border = 0 / in px
  const cs_thumb_roundness = 0;                         // default: cs_thumb_roundness = 0 / in px
  const cs_buttons_border = 0;                          // default: cs_buttons_border = 0 / in px
  const cs_buttons_roundness = 0;                       // default: cs_buttons_roundness = 0 / in px
  const cs_thumb_minimal_size = 12;                     // default: cs_thumb_minimal_size = 12; / in px
  const cs_ignore_color_gradients = true;               // default: cs_ignore_color_gradients = false / 'flat' scrollbars
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
  const cs_background_color = "#1A1920";                // default: cs_background_color = "#DDDDDD"
  let cs_background_image_vertical = "unset";           // default: cs_background_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_background_image_horizontal = "unset";         // default: cs_background_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_arrows_on_buttons_buttons_size = 1.1;          // default: cs_arrows_on_buttons_buttons_size = 1.0
// - corner
  const cs_corner_background_color = "#bfbfbf";         // default: cs_corner_background_color = "#DDDDDD" / - corner
  let cs_corner_background_image = "unset";             // default: cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"
// - thumb/slider
  const cs_thumb_color = "#474747";                     // default: cs_thumb_color = "#33CCFF" / thumb/slider
  let cs_thumb_image_vertical = "unset";                // default: cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_image_horizontal = "unset";              // default: cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_hover_color = "#0082FC";                // default: cs_thumb_hover_color = "#66FFFF"
  let cs_thumb_hover_image_vertical = "unset";          // default: cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_thumb_hover_image_horizontal = "unset";        // default: cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_thumb_border_color = "#B2B2B2";              // default: cs_thumb_border_color = "#33CCFF"
// - buttons
  const cs_buttons_color = "#5b5b66";                   // default: cs_buttons_color = "#66FFFF" "#5b5b66"/ buttons
  let cs_buttons_image_vertical = "unset";              // default: cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_image_horizontal = "unset";            // default: cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"
  const cs_buttons_hover_color = "#0082FC";             // default: cs_buttons_hover_color = "#33CCFF"
  const cs_buttons_border_color = "#B2B2B2";            // default: cs_buttons_border_color = "#33CCFF" "#5b5b66"
  let cs_buttons_hover_image_vertical = "unset";        // default: cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"
  let cs_buttons_hover_image_horizontal = "unset";      // default: cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"

/* *************************************************************************************************************************** */
  // unset background image color gradients -> flat scrollbars
  if(cs_ignore_color_gradients === true)
    cs_background_image_vertical
    = cs_background_image_horizontal
    = cs_corner_background_image
    = cs_thumb_image_vertical
    = cs_thumb_image_horizontal
    = cs_thumb_hover_image_vertical
    = cs_thumb_hover_image_horizontal
    = cs_buttons_image_vertical
    = cs_buttons_image_horizontal
    = cs_buttons_hover_image_vertical
    = cs_buttons_hover_image_horizontal
    = "unset";

  let custom_scrollbars_code='';
  let custom_scrollbar_arrows_code='';

  if(custom_scrollbars === true)
    custom_scrollbars_code=`
      slider, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
        appearance: auto;
        -moz-default-appearance: none !important;
      }
      slider {
        background-color: ${cs_background_color} !important;
      }
      scrollbar[orient="vertical"] slider {
        background-image: ${cs_background_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] slider {
        background-image: ${cs_background_image_horizontal} !important;
      }
      scrollcorner {
        background-color: ${cs_corner_background_color} !important;
        background-image: ${cs_corner_background_image} !important;
      }
      scrollbar thumb {
        background-color: ${cs_thumb_color} !important;
        border-radius: ${cs_thumb_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_thumb_border}px ${cs_thumb_border_color} !important;
      }
      scrollbar thumb[orient="vertical"] {
        background-image: ${cs_thumb_image_vertical} !important;
        min-height: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb[orient="horizontal"] {
        background-image: ${cs_thumb_image_horizontal} !important;
        min-width: ${(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)}px !important;
      }
      scrollbar thumb:hover, scrollbar thumb:active {
        background-color: ${cs_thumb_hover_color} !important;
      }
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {
        background-image: ${cs_thumb_hover_image_vertical} !important;
      }
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {
        background-image: ${cs_thumb_hover_image_horizontal} !important;
      }
      scrollbar scrollbarbutton {
        background-color: ${cs_buttons_color} !important;
        border-radius: ${cs_buttons_roundness}px !important;
        box-shadow: inset 0 0 0 ${cs_buttons_border}px ${cs_buttons_border_color} !important;
        height: 17px !important;
        width: 17px !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton {
        background-image: ${cs_buttons_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton {
        background-image: ${cs_buttons_image_horizontal} !important;
      }
      scrollbar scrollbarbutton:hover {
        background-color: ${cs_buttons_hover_color} !important;
      }
      scrollbar[orient="vertical"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_vertical} !important;
      }
      scrollbar[orient="horizontal"] scrollbarbutton:hover {
        background-image: ${cs_buttons_hover_image_horizontal} !important;
      }
    `;

  if(custom_scrollbar_arrows === true)
    custom_scrollbar_arrows_code=`
      scrollbarbutton[type="increment"],
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],
      scrollbarbutton[type="increment"],
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {
        background-repeat: no-repeat;
        background-position: center !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_gold.svg") !important;
      /*  background-position: top !important;  */
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-runter_gold.svg") !important;
      /*  background-position: bottom !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {
        background-image: url("${ProfileDirectory}/Pfeil-links_gold.svg") !important;
      /*  background-position: left !important;  */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_gold.svg") !important;
      /*  background-position: right !important;  */
      }

      /* hover */

      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-hoch_gold.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-runter_gold.svg") !important; */
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-links_gold.svg") !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {
        background-image: url("${ProfileDirectory}/Pfeil-rechts_gold.svg") !important;
      }
      scrollbar[orient="vertical"] > scrollbarbutton {
        height: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
      }
      scrollbar[orient="horizontal"] > scrollbarbutton {
        width: ${(custom_scrollbar_size_value*cs_arrows_on_buttons_buttons_size)}px !important;
      }
    `;

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService)
      .loadAndRegisterSheet(Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(`
        ${custom_scrollbars_code}
        ${custom_scrollbar_arrows_code}
  `), null, null),

  Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService).AGENT_SHEET);

})()

Alles anzeigen

dharkness21

Zitat von Mapenzi

Ist mir unbekannt. Bitte ein Bild zeigen.
Oder meist du vielleicht den Pfeil > links im Nachrichten-Header Bereich? Dieser Pfeil erscheint nur, wenn man die Erweiterung CompactHeaders installiert hat.

Die Wahrscheinlichkeit ist ausgesprochen hoch, das die Erweiterung CompactHeaders gemeint ist, denn ohne entsprechende Erweiterung gibt es dort keinen Twisty.

Mapenzi

Zitat von dharkness21

Das geht nur noch über ein Javascript

Auf meinem Mac funktioniert folgender CSS Code (die Hintergrundfarbe "Gelb" ist für den Screenshot gewählt wegen des größeren Kontrasts)

Code

/* Scrollbar colors 1-Thumb 2-Background */
:root {
scrollbar-color: #96CDCD yellow; 
}

dharkness21

Zitat von Mapenzi

Auf meinem Mac funktioniert folgender CSS Code

Mittels Javascript geht mehr, guckst Du da ↓.

Neddy · CSS-Codeliste noch oder teilweise gültig - fraglich (Stand 31.07.2025).txt

Zitat von dharkness21

den Pfeil > links im Nachrichten-Header Bereich?

Hallo,

Ja, du hast Recht: Bei mir ist seit TB 140 mit den Farben alles aus den Rudern gelaufen.
Ordnerbaum, Nachrichtenliste, Kopfzeile und Nachrichtenbereich.
Meine komplette CSS muss leider umgeschrieben werden.
Meine CSS-Codeliste (im Anhang) ist sie noch oder teilweise gültig ? (Stand 31.07.2025).txt

Güße
Neddy

Thunderbird 141 – userChrome.css: Farbverläufe, Ordnerbaum & Scrollbalken un vieles mehr nicht anpassbar.

graba 2. August 2025 um 22:41

Thunderbird 140.0.1 veröffentlicht

Thunderbird 140.1.0 ESR veröffentlicht

Thunderbird 128.12.0 ESR veröffentlicht