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?

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