Einfärben von Teilen der Benutzeroberfläche

Mergon

Hallo

Ich würde gern im aktuellen Profil ein paar farbliche Änderungen vornehmen die mir jedoch nicht gelingen wollen.
Kopieren und einfügen kann ich, heißt, einige Änderungen per css kann ich vornehmen.

Bilder sagen ja bekanntlich mehr als Worte, daher ein Vergleich wie es lange Zeit aussah und wie weit ich im neuen Profil bin. Früher war alles schwarz, heute ist die Welt nur noch grau 😃

alt: alles schön schwarz hier:

neues Profil: Hintergrund grau, statt schwarz

Gleiches Spiel im Kalender:

alt:

neu:

Es geht also um die Hintergründe der Tabs, Menüs und wie die ganzen Sachen heißen.

Meine "userChrome.css" habe ich schon per ChatGPT "optimieren" lassen, wobei mich das Gefühl beschleicht dass das nicht die beste meiner Ideen war.
Hier der Inhalt:

CSS

/************************************************************
 * THUNDERBIRD USERCHROME.CSS
 * Bereinigte & strukturierte Version
 ************************************************************/

/************************************************************
 * FARBEN / VARIABLEN
 ************************************************************/
:root {
  --bg-dark: #000;
  --bg-light-dark: #191919;

  --accent: #2ccfde;
  --accent-hover: #71F3FF;

  --selection: #6a142a;
  --selection-light: #687179;

  --today-bg: #a52a2a;
  --today-border: red;

  --warning: #ff681f;

  --text-light: #fff;
  --text-dark: #000;

  --folder-hover: #77A9D7;
  --calendar-selection: #132c41;
}


/************************************************************
 * POSTEINGANG
 ************************************************************/

/* ---------------------------------------------------------
   Ordnerliste
--------------------------------------------------------- */

.container {
  height: 18px !important;
  font-family: Tahoma !important;
  font-size: 13px !important;
}

.container:hover {
  background-color: var(--folder-hover) !important;
  color: var(--text-light) !important;
  opacity: 1 !important;
}

/* Ungelesene / neue Ordner */

li > ul > li[class*="unread"] > .container .name {
  color: #ff0000 !important;
}

ul[role="group"] > li[class~="new-messages"] > .container .name {
  color: #f20 !important;
}

/* Aktiver Ordner */

#folderTree [is="folder-tree-row"] .selected > div.container {
  background-color: var(--selection) !important;
  color: var(--text-light) !important;
}


/* ---------------------------------------------------------
   "Neue Nachricht"-Button
--------------------------------------------------------- */

/* Originaltext ausblenden */

#folderPaneWriteMessage.button {
  background-image: none !important;
  color: transparent !important;
  position: relative !important;
}

/* Neuer Text */

#folderPaneWriteMessage.button::after {
  content: "Verfassen" !important;
  position: absolute !important;

  top: 3px !important;
  left: 16px !important;

  color: var(--text-light) !important;
}

/* Größe korrigieren */

#folderPaneWriteMessage.button.icon-button {
  padding-inline: unset !important;
}


/* ---------------------------------------------------------
   Nachrichtenliste
--------------------------------------------------------- */

tr[is="thread-row"] {
  height: 24px !important;

  font-family: Tahoma !important;
  font-size: 12px !important;
}

/* Zebra-Muster */

#threadTree tr {
  background-image: none !important;
  background-color: var(--bg-light-dark) !important;
}

#threadTree tr:nth-child(2n) {
  background-color: var(--bg-dark) !important;
}

/* Ausgewählte Nachricht */

#threadTree tr[is="thread-row"].selected[data-properties~="untagged"] {
  background-image: none !important;
  background-color: #28194F !important;

  color: var(--text-light) !important;
  font-weight: bold !important;
}

/* Ungelesene Nachrichten */

tr[data-properties~="unread"] {
  color: var(--warning) !important;
}


/* ---------------------------------------------------------
   Spaltenüberschriften
--------------------------------------------------------- */

th[is="tree-view-table-header-cell"] > .tree-table-cell > button,
.tree-table-header tr th button {
  font-size: 14px !important;
  font-weight: bold !important;
  color: var(--accent) !important;
}

.tree-table,
.tree-table-header {
  --tree-header-table-height: 20px !important;
}


/* ---------------------------------------------------------
   Tabs
--------------------------------------------------------- */

.tab-text {
  font-size: 14px !important;
}

.tabmail-tab[selected] .tab-text {
  color: var(--accent) !important;
  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Anhänge
--------------------------------------------------------- */

#attachmentSize,
#attachmentList .attachmentcell-size {
  color: yellow !important;
  font-weight: bold !important;
}

#attachmentIcon,
#attachmentCount {
  color: red !important;
  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Toolbars
--------------------------------------------------------- */

#unifiedToolbar,
#tabs-toolbar,
#toolbar-menubar {
  background-image: none !important;
  background-color: var(--bg-dark) !important;
}

/* Hover */

.unified-toolbar-button:hover,
:is(
  .chromeclass-toolbar,
  #header-view-toolbox,
  #attachmentView,
  .lightning-notification-bar,
  #quick-filter-bar
) .toolbarbutton-1:hover {

  background-color: var(--accent-hover) !important;
  color: var(--text-dark) !important;
}


/************************************************************
 * KALENDER
 ************************************************************/

/* ---------------------------------------------------------
   Kalenderwochen
--------------------------------------------------------- */

.calendar-month-day-box-week-label.calendar-month-day-box-date-label,
#calendarWeek {
  color: var(--accent) !important;

  font-size: 14px !important;
  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Buttons ausblenden
--------------------------------------------------------- */

#primaryButtonSidePanel,
#sideButtonsBottom,
#spacesPinnedButton {
  display: none !important;
}


/* ---------------------------------------------------------
   Suchbereich / Terminliste
--------------------------------------------------------- */

#unifinder-search-results-tree {
  min-height: 192px !important;
}

#event-filter-menulist,
#unifinder-search-field {
  background-color: var(--bg-dark) !important;
}


/* ---------------------------------------------------------
   Kalenderliste
--------------------------------------------------------- */

#calendar-list > li.selected {
  background-color: var(--calendar-selection) !important;

  color: var(--text-light) !important;
  font-weight: bold !important;

  border: 1px solid gray !important;
  border-radius: 3px !important;
}

/* Farbkreis */

.calendar-color {
  transform: scale(2) !important;
  margin-right: 10px !important;
}


/* ---------------------------------------------------------
   Heute-Button
--------------------------------------------------------- */

#calendarViewHeader > div > div > div > button#todayViewButton {

  min-width: 72px !important;
  max-width: 72px !important;

  min-height: 24px !important;
  max-height: 24px !important;

  background-image: none !important;
  padding: 0 !important;
}

#calendarViewHeader > div > div > div > button#todayViewButton::after {

  content: "Heute" !important;

  padding: 0 !important;
  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Kalendernavigation
--------------------------------------------------------- */

#calendarViewHeader,
#todayViewButton,
#nextViewButton,
#previousViewButton,
#viewToggle,
#calTabDay,
#calTabWeek,
#calTabMultiweek,
#calTabMonth {

  background-color: var(--bg-dark) !important;
}

#calendarViewHeader > div > div > button {

  background-color: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

#calendarViewHeader > div > div > button[aria-selected="true"] {

  background-color: var(--selection-light) !important;
  color: var(--text-light) !important;

  font-weight: bold !important;
}

#calendarViewHeader > div > div > button[aria-selected="true"]:hover {

  background-color: #D1E2F2 !important;
  color: var(--text-dark) !important;

  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Heutiger Tag
--------------------------------------------------------- */

.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {

  border: 3px solid brown !important;
}

.calendar-month-day-box-date-label[relation="today"] {

  background: red !important;
  color: var(--text-dark) !important;

  font-weight: bold !important;
}


/* ---------------------------------------------------------
   Termine ohne Rahmen
--------------------------------------------------------- */

.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {

  border-color: transparent !important;
  box-shadow: none !important;
}


/************************************************************
 * MINIKALENDER
 ************************************************************/

/* Hintergrund */

#calMinimonth,
#calMinimonth * {
  background-color: var(--bg-dark) !important;
}

/* Heute */

.minimonth-day[today="true"] {

  background-color: var(--today-bg) !important;
  border-color: var(--today-border) !important;
}

/* Andere Monate */

.minimonth-day[othermonth="true"] {
  color: #ff6600 !important;
}

/* Kalenderwoche */

.minimonth-week {

  background-color: var(--bg-dark) !important;

  color: var(--accent) !important;
  font-weight: bold !important;
}

/* Tage mit Terminen */

.minimonth-day[busy] {

  background-color: #2D4A64 !important;

  color: var(--text-light) !important;
  font-weight: bold !important;
}

/* Toolbars */

#unifiedToolbar,
#tabs-toolbar,
#toolbar-menubar,
#navigation-toolbox,
#mail-toolbox {

  background-image: none !important;
  background-color: #000000 !important;
}

/************************************************************
 * GLOBALER SCHWARZER HINTERGRUND
 ************************************************************/
/* Hauptfenster */

window,
dialog,
#messengerWindow,
#folderPane,
#threadPane,
#messagePane,
#calendarTabPanel,
#calendarDisplayDeck,
#calendar-view-box,
#tasksBox {

  background-color: #000000 !important;
  color: #ffffff !important;
}
/* Menüs */

menupopup,
menu,
menuitem {

  background-color: #000000 !important;
  color: #ffffff !important;
}

/************************************************************
 * KALENDERNAVIGATION
 ************************************************************/

/* Gesamter Header */

#calendarViewHeader {
  background-color: var(--bg-dark) !important;
}


/* Alle Kalender-Buttons */

#calendarViewHeader button,
#calendarViewHeader toolbarbutton {

  background-image: none !important;
  background-color: var(--bg-dark) !important;

  color: var(--text-light) !important;

  border: none !important;
  box-shadow: none !important;
}


/* Hover */

#calendarViewHeader button:hover,
#calendarViewHeader toolbarbutton:hover {

  background-color: var(--accent-hover) !important;
  color: var(--text-dark) !important;
}


/* Aktiver Tab */

#calendarViewHeader button[aria-selected="true"],
#calendarViewHeader toolbarbutton[aria-selected="true"] {

  background-color: var(--selection-light) !important;
  color: var(--text-light) !important;

  font-weight: bold !important;
}


/* Aktiver Tab Hover */

#calendarViewHeader button[aria-selected="true"]:hover,
#calendarViewHeader toolbarbutton[aria-selected="true"]:hover {

  background-color: #D1E2F2 !important;
  color: var(--text-dark) !important;
}

Alles anzeigen

Kann mir jemand behilflich sein?

Sehvornix

Hallo,

das Forum hat einen eigenen Bereich für diese Art von Anliegen:

Manuelle Anpassungen per CSS oder Script

Darin finden sich zahlreiche Beispiele für solche Anpassungen, so dass Du Dich dort einfach nur zu bedienen brauchst.

Zitat von Mergon

Meine "userChrome.css" habe ich schon per ChatGPT "optimieren" lassen, wobei mich das Gefühl beschleicht dass das nicht die beste meiner Ideen war.

Wohl wahr. In anderen Foren geht solcher Input direkt ins Device NULL und die Foristen setzen sich gar nicht erst mit dem Anliegen auseinander.

Die Spezis in Sachen CSS werden Dir aber sicherlich in Kürze auch individuell weiterhelfen, wobei das meist ein iterativer Prozess wird.

Gruß,
Sehvornix

Mergon

Gut, dann stell ich mal noch die ursprüngliche Variante der userchrome.css ein, ohne KI. Allerdings sieht das für Kenner wirklich ziemlich wüst aus 🫣

CSS

/*** Posteingang ***/

/** Ordnerbaum anpassen **/
/* Hover Ordnerliste */
.container:hover {
background-color: #77A9D7 !important;
color: white !important;
opacity: 1 !important;
}
/* Schriftgröße- und abstand Ordnerliste */
.container {
  appearance: none !important;
height: 18px !important;
font-family: tahoma !important;
font-size: 13px !important;
}
/* Änderung Ordnerfarbe bei neuen/ungelesenen Mails */
/* Code von dharkness: https://www.thunderbird-mail.de/forum/thread/92893-farbliche-anpassung-des-linken-baumes/?postID=523641#post523641 */
li > ul > li[class*="unread"] > .container .name {
    color: #FF0000 !important;
}
ul[role="group"] > li[class~="new-messages"] > .container .name {
    color: #F20 !important;
}
/* Auswahl des aktiven Ordners in der Ordnerliste  */
 #folderTree [is="folder-tree-row"] .selected > div.container {
    background-color: #6a142a !important;
    color: #ffffff !important; }

/*** "+ Neue Nachricht"-Button ändern ***/
/* https://www.thunderbird-mail.de/forum/thread/93096-%C3%A4nderung-des-button-neue-nachricht-im-folderpane-grundsatzfrage/?postID=525147#post525147 */
/** "+ Neue Nachricht" ausblenden **/
#folderPaneWriteMessage.button {
  appearance: none !important;
  background-image: none !important;
  color: transparent !important;
  position: relative !important;
}
/** Content ersetzen, positionieren & einblenden **/
#folderPaneWriteMessage.button::after {
  appearance: none !important;
  content: 'Verfassen' !important;
  color: #fff !important;
  position: absolute !important;
  top: 3px !important;
  left: 16px !important; /* ohne "#folderPaneWriteMessage.button.icon-button" z.B. 38px verwenden */
}
/** Buttongröße an Content anpassen **/
#folderPaneWriteMessage.button.icon-button {
  appearance: none !important;
  padding-inline-start: unset !important;
  padding-inline-end:  unset !important;
}

/* Nachrichtenliste anpassen -> 'height nicht >24px; 19.10.23 */
tr[is="thread-row"] {
  appearance: none !important;
height: 24px !important;
font-family: tahoma !important;
font-size: 12px !important;
}
/* Hintergrundfarbe der Spaltenüberschriften "Von", "Betreff" etc. ändern */
 th[is="tree-view-table-header-cell"] > .tree-table-cell > button,
 .tree-table-header tr th button {
  appearance: none !important;
  font-weight: bold !important;
  font-size: 14px !important;
  color: #2ccfde !important;
}
/* Spaltenleiste "Betreff" etc. Höhe anpassen */
.tree-table,
.tree-table-header {
appearance: none !important;
 --tree-header-table-height: 20px !important;
}
/* Tabs-Schriftformatierung */
/* Code von Mapenzi: https://www.thunderbird-mail.de/forum/thread/80183-schrift-der-tabs-%C3%A4ndern-und-noch-fett/?postID=463249#post463249 */
.tab-text {font-size: 14px !important;}
.tabmail-tab[selected] .tab-text {font-weight: bold !important;
color: #2ccfde !important; 
}

/* "Zebramuster" in Nachrichten-Liste */
/* Code von MSFreak: https://www.thunderbird-mail.de/forum/thread/92018-schriftgr%C3%B6%C3%9Fe-in-der-nachrichtenliste-im-tb-115-0/?postID=515992#post515992 */
#threadTree tr {
background-image: none !important;
background-color: #191919 !important;}
#threadTree tr:nth-child(2n) {
background-image: none !important;
background-color: #000000 !important;}

/* Hintergrund von ausgewählter Mail ändern */
/* Code von Mapenzi: https://www.thunderbird-mail.de/forum/thread/92952-hintergrundfarbe-von-mit-schlagw%C3%B6rtern-gekennzeichneten-mails/?postID=523970#post523970 */

tr[is="thread-row"].selected[data-properties~="untagged"] {
background-color: grey !important; /*funktioniert nicht, wird vom vorherigen Code überschrieben*/
font-weight: bold !important;
color: white !important; }

/* einfärben ungelesener Mails */
tr[data-properties~="unread"] {
    color: #ff681f !important;
}

/*** Kalender ***/
/** Ansicht ***/
/* KW: xx-xx Farbe ändern */
.calendar-month-day-box-week-label.calendar-month-day-box-date-label,
#calendarWeek
 {
color: #2ccfde !important;
font-size: 14px !important;
font-weight: bold !important;
}
/* Button "+ Neuer Termin" ausblenden */
#primaryButtonSidePanel {
display: none !important;
}

/* Übersicht "Termine der nächsten xxx Tage" größer: ohne den Code ist die Ansicht sehr schmal */
/* Code von dharkness21: https://www.thunderbird-mail.de/forum/thread/93146-termine-suchen-in-kalenderansicht/?postID=525459#post525459 */
#unifinder-search-results-tree {
    min-height: 192px !important;
}
/* Hintergrundfarbe Kalenderauswahl ändern */
/* Code von Bastler: https://www.thunderbird-mail.de/forum/thread/92472-tb-115-buttons-umf%C3%A4rben/?postID=519884#post519884 */
#calendar-list > li.selected {
appearance: none !important;
background-color: #132c41 !important;
color: #ffffff !important;
border: 1px solid gray !important;
border-radius: 3px !important;
font-weight: bold !important;
}
/* farbiger Kreis li. neben Kalenderauswahl größer */
.calendar-color {
appearance: none !important;
transform: scale(2.0, 2.0) !important;
margin-right: 10px !important;
}
/* Anzeige für "Heute" in der Kalenderansicht ändern */
#calendarViewHeader > div > div > div > button#todayViewButton {
    min-height: 24px !important;
    max-height: 24px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    background-image: none !important;
    padding: 0 !important;
}
#calendarViewHeader > div > div > div > button#todayViewButton:after {
    content: "Heute" !important;
    padding: 0 !important;
	font-weight: bold !important;
}
/* Farbe für "Heute" in der Kalenderansicht ändern  */
#calendarViewHeader,
#todayViewButton,
#nextViewButton,
#previousViewButton {
background-color: #000000 !important;
}
/* Aktueller Tag in mehrwöchiger und Monatsansicht */
/* Code von Road-Runner: https://www.camp-firefox.de/forum/thema/137031-thunderbird-papierkorb-speicherplatzanzeige/?postID=1236614#post1236614 */

.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"] {
border: 3px solid brown !important;
}
.calendar-month-day-box-date-label[relation="today"] {
color: black !important;
background: red !important;
font-weight: bold !important;
}

/* Farbe der "Termine der nächsten ..." und Suchleiste geändert */
#event-filter-menulist,
#unifinder-search-field {
background-color: #000000 !important;
}
/* "Neuer Kalender" unten links ausblenden */
#sideButtonsBottom {
display: none !important;
}

/* Rahmen um Tagestermine löschen */
/* Code von edvoldi: https://www.thunderbird-mail.de/forum/thread/87615-wieder-mal-css-anpassen-kalenderfarben/?postID=511595#post511595 */
.calendar-month-day-box .calendar-month-day-box-item[allday="true"],
.calendar-color-box {
border-color: transparent !important;
box-shadow: none !important;
}

/* Spricht alle Button an, die die Ansicht der "Tage", "Woche" ... umschalten */
#viewToggle,
#calTabDay,
#calTabWeek,
#calTabMultiweek,
#calTabMonth {
background-color: #000000 !important;
}
#calendarViewHeader > div > div > button {
    background-color: #000 !important;
    color: #FFF !important;
}
#calendarViewHeader > div > div > button[aria-selected="true"] {
    background-color: #687179 !important;
    color: #FFF !important;
	font-weight: bold !important;
}
#calendarViewHeader > div > div > button[aria-selected="true"]:hover {
    background-color: #D1E2F2 !important;
    color: #000 !important;
	font-weight: bold !important;
}

/** Minikalender (oben links) **/
/* Farbe heutiger Tag im Minikalender */
.minimonth-day[today="true"] {
   background-color: #a52a2a !important;
   border-color: red !important;
}
/*Farbe vorhergehender und nachfolgender Monat im Minikalender */
.minimonth-day[othermonth="true"] {
    color: #ff6600 !important;
}
/* Farbe Spalte Kalenderwoche */
.minimonth-week {
    color: #2ccfde !important;
    font-weight: bold !important;
	background-color: #000000 !important;
    }
/* Kalendertage mit Terminen (Bug: Feiertage bzw. "ganztags"-Termine werden nicht eingefärbt */
.minimonth-day[busy] {
font-weight: bold;
color: #ffffff !important;
background-color: #2D4A64 !important;
}
/* Kalenderhintergrund */
#calMinimonth,
#calMinimonth > div:nth-child(1),
#calMinimonth > div:nth-child(1) > div:nth-child(3) > button:nth-child(1),
#calMinimonth > div:nth-child(1) > div:nth-child(1) > button:nth-child(1),
#calMinimonth > div:nth-child(1) > div:nth-child(2) > button:nth-child(1),
#calMinimonth > div:nth-child(1),
#calMinimonth > div:nth-child(1) > div:nth-child(2) > button:nth-child(3),
#calMinimonth > div:nth-child(1) > div:nth-child(2),
#calMinimonth > div:nth-child(1) > div:nth-child(3) > div:nth-child(2) > input:nth-child(1),
#calMinimonth > div:nth-child(1) > div:nth-child(3) > button:nth-child(3),
#calMinimonth > div:nth-child(1) > div:nth-child(3) {
background-color: #000000 !important;
}

/*** sonstige ***/
/* Ausblenden von dem Icon oben links */
/* Code von Moki: https://www.thunderbird-mail.de/forum/thread/92366-thunderbird-ab-115-0-1-symbol-bereiche-men%C3%BC-ausblenden-entfernen/?postID=518698#post518698 */

#spacesPinnedButton {
  display: none !important;
}

/* Unified Toolbar: Farbe beim hovern ändern */
/* Code von Alphatier: https://www.thunderbird-mail.de/forum/thread/92507-symbole-in-der-unified-toolbar-f%C3%A4rben/?postID=520139#post520139 */

.unified-toolbar-button:hover,
:is(.chromeclass-toolbar,#header-view-toolbox,#attachmentView,.lightning-notification-bar,#quick-filter-bar) .toolbarbutton-1:hover {
      background-color: #71F3FF !important;
      color: black !important;
}

/** Vorschau Anhänge **/
/* Schriftfarben bei Anhängen */
#attachmentIcon, #attachmentCount {
color: red !important;
font-weight: bold !important;
}

/* Schriftfarben in der Aufklappbox bei Anhängen */
#attachmentSize, #attachmentList .attachmentcell-size {
color: yellow !important;
font-weight: bold !important;
}

Alles anzeigen

Einfärben von Teilen der Benutzeroberfläche

Mergon 20. Mai 2026 um 19:33

Thunderbird 151.0 veröffentlicht

Thunderbird 140.11.0 ESR veröffentlicht

Ähnliche Themen

Chaos beim Speichern von gesendeten Mails in Vodafone Ordnern (imap Server)

Bei den Konten-Einstellungen für RSS-Feeds fehlt der Eintrag "Neue Artikel beim Programmstart abrufen" unter Server Einstellungen

Leiste in die Benutzeroberfläche stellen für Schrift,Schriftgröße, Art der Schrift (Kursiv,Fett,)

Junkmail an mich an unbenutzte Mailadresse

Globale Suche funktioniert in Nachrichten von Ebay nicht

Postausgang bei Teilen