Personnalisation de l'interface utilisateur sur Thunderbird

Source : How to customize Thunderbird Mail theme using userChrome.css - devnodes.in

Activer la personnalisation

Les préférences avancées se trouvent en bas de l'onglet Général des Paramètres en cliquant sur le bouton Éditeur de configuration….

Dans les préférences avancées, activer toolkit.legacyUserProfileCustomizations.stylesheets à true en double cliquant sur la valeur par défaut.

Déterminer le dossier de profil utilisateur

Menu > Aides > Informations de dépannage > Répertoire de profil
Cliquer le bouton Ouvrir le dossier correspondant

Créer le fichier de personnalisation

Ensuite, il faut créer le dossier chrome dans le dossier de profil utilisé, puis le fichier userChrome.css.

Utiliser les outils de développement

Pour activer les outils de développement :

• ☰, Outils, Outils de développement ;
• Confirmer l'invite de sécurité concernant la connexion entrante ;
• Se rendre dans l'Éditeur de style ;
• Filtrer pour afficher la feuille de styles userChrome.css ;
• Applique le style ;
• Enregistrer !

Exemples

Modifier la couleur des messages non-lus

@media not (prefers-contrast) {
  @media (prefers-color-scheme: dark) {
    :root {
      --thread-pane-unread-color: var(--color-teal-30) !important;
    }
  }
}

Modifier la couleur et le fond des messages non-lus puis inverser au survol

@media not (prefers-contrast) {
  @media (prefers-color-scheme: dark) {
    tr[is="thread-card"][data-properties~="unread"]:not(.selected, :hover) {
      background-color: var(--color-orange-20) !important;
      color: var(--color-blue-80) !important;
    }
    tr[is="thread-card"][data-properties~="unread"]:not(.selected):hover {
      background-color: var(--color-blue-80) !important;
      color: var(--color-orange-20) !important;
    }
  }
}

Astuces

Le chemin de l'iframe des messages est : html#messengerWindow body vbox#messengerBody hbox#tabmail-container tabmail#tabmail.printPreviewStack tabbox#tabmail-tabbox tabpanels#tabpanelcontainer.plain vbox#mail3PaneTab1.deck-selected stack browser#mail3PaneTabBrowser1.

Le chemin de la vue des messages au sein de l'iframe est html body.layout-vertical div#threadPane tree-view#threadTree.tree-view-scrollable-container table.tree-table.some-selected tbody

Bonus

Mon userChrome.css :

@media not (prefers-contrast) {
  @media (prefers-color-scheme: dark) {
    #threadTree [data-properties~="unread"]:not(.selected, :hover) {
      background-color: var(--color-orange-30) !important;
      color: var(--color-blue-80) !important;
      box-shadow: var(--color-orange-10) 1px 10px 10px inset,
        var(--color-orange-60) -1px -5px 10px -2px inset !important;
    }
    #threadTree [data-properties~="unread"]:not(.selected):hover {
      background-color: var(--color-blue-80) !important;
      color: var(--color-orange-20) !important;
      box-shadow: var(--color-blue-50) 1px 10px 10px inset,
        var(--color-ink-90) -1px -5px 10px -2px inset !important;
    }
    #threadTree
      [data-properties~="unread"][data-properties~="flagged"]:not(
        .selected,
        :hover
      ) {
      text-shadow: var(--color-teal-20) 0px 0px 2px !important;
    }
    #threadTree [data-properties~="read"][data-properties~="flagged"] {
      box-shadow: var(--color-magenta-20) 1px 5px 10px -2px inset,
        var(--color-magenta-90) -1px -5px 10px inset !important;
    }
    #threadTree
      [data-properties~="new"]:not(.selected)
      .thread-card-container
      :is(.subject, .date) {
      color: var(--color-magenta-90) !important;
      text-shadow: var(--color-teal-20) 0px 0px 2px !important;
    }
    #threadTree
      [data-properties~="new"]:not(.selected)
      .thread-card-container:hover
      :is(.subject, .date) {
      color: var(--color-orange-30) !important;
      text-shadow: var(--color-magenta-90) 0px 0px 4px !important;
    }
    #threadTree .thread-card-container {
      padding: 0px 12px !important;
    }
    #threadTree td:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
      position: relative;
      top: 2px;
    }
    #threadTree td:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
      position: relative;
      bottom: 2px;
    }
  }
}