Personnaliser Thunderbird/Icedove avec le theme thunderbird-monterail

Introduction

Il y a quelques jours, j’ai vu passer sur Mastodon, ou Diaspora* (je sais plus) des posts à propos d’un pack de 4 thèmes pour Thunderbird, le projet est nommé thunderbird-monterail, car inspiré par un post de blog de Monterail (une boite qui fait du dev à base de Ruby on Rails), qui a fait des mock-ups de l’interface. Du coup, je me suis dit que ce serait intéressant de les tester.

Installation

Pour l’installer sous un système GNU/Linux, il suffit de récupérer l’archive, et de la décompresser dans le répertoire des fichiers de configuration de thunderbird, typiquement :

Ou sous Debian

Et de renommer le dossier extrait (thunderbird-monterail) chrome. Ensuite de choisir un des themes, en spécifiant son nom à la ligne @import "themes/nomdutheme.css"; du fichier userChrome.css.

Le thème que j’ai pris, en soit n’est pas mal. Mais j’ai voulu le personnaliser un peu.

Un peu de CSS

Quelques problèmes

L’idée, c’est de rajouter une image de fond, à gauche, sur l’arborescence des répertoires des différentes boites email configurées dans Thunderbird. J’ai pris une image au fond transparent, donc au format png (le jpg ne supporte pas la transparence), pour pouvoir garder la couleur d’arrière-plan du thème. Mais avec la couleur par défaut, ça fonctionne pas. Donc j’ai dû remplacé la couleur de fond dégradée par une couleur unie, rgba pour pouvoir jouer sur la transparence. J’ai re-tester mes modifications sur la dernière version du thème vendredi, et je me suis rendu compte, que depuis, il y a un arrière-plan gris/blanchâtre, derrière la couleur d’arrière-plan. Donc l’effet de transparence est annulée, et le canal alpha, en modifiant la transparence, fait plus ou moins apparaître le 2ᵉ arrière-plan. Pour l’instant je n’ai pas trouvé comment le virer (et non, c’est pas la ligne --monterail-white-background: white; dans General Options du fichier monterail.css, la commenter et relancer Thunderbird ne donne pas le résultat attendu. Ça pourrait potentiellement être le cache, mais pour tous les tests faits jusqu’à présent, les modifications ont été prises en compte dès le redémarrage donc j’y crois pas trop.

Un autre problème que j’ai rencontré concerne les dernières modifications du thème. Dans la dernière version il y a des variables un peu partout, qui sont utilisés dans _base.css et dont les valeurs sont affectées dans chaque fichier theme.css, qui modifient le comportement du moteur du rendu. L’intérêt de cette méthode est évident, puisque le but est de pouvoir changer de thème facilement @import. Mais pour une raison que j’ignore, en créant une variable pour la propriété background-image: dans _base.css, et lui affecter une valeur url("images/monimage.png"); dans monterail.css, ne fonctionne que je spécifie aucune couleur d’arrière-plan et que je supprime celle par défaut, ce qui fait que l’arrière-plan de mon image, qui est transparent, laisse apparaître le deuxième arrière plan gris/blanchâtre, donc je ne veux pas. Ou alors, je peux avoir ma couleur de fond personnalisée, mais pas l’image de fond. Mais en essayant plusieurs syntaxes qui utilisent les variables, j’ai pas encore réussi à avoir les 2 fond en même temps.

La solution

Pour contourner ce deuxième problème, j’ai laissé tomber l’usage des variables, j’ai défini ma couleur d’arrière-plan, et mon image de fond, en utilisant les propriétés backgroud-color: et backgroud-image: et leurs valeurs, directement dans le bloc #folderTree {} du fichier _base.css. Pour ça, il faut commenter la ligne background: var(--folder-tree-background-color) !important; qui récupère la couleur de fond du thème sélectionné.

L’avantage de ne pas passer par les variables, c’est que l’image de fond (1) survit au changement du thème, sans avoir à répercuter la même modification sur chaque thème.

Si l’image de fond contient des couleurs claires, il faut aussi penser à changer la couleur du texte dans #folderTree {}, du moins pour le texte quand il n’est pas surligné. Car pour le thème monterail.css, cette partie du texte est en blanc.

Donc finalement, j’ai annulé tous mes modifications de tests, ou je n’ai modifié que le bloc #folderTree {} du fichier _base.css. J’ai modifié le code suivant

Pour le remplacer par

J’ai commenté, et non pas supprimer les propriétés par défaut, pour pouvoir éventuellement les réutiliser plus tard (cf 1.). Et le dossier « images » contenant l’image est bien sûr placé dans le répertoire contenant les thèmes, ~/.icedove/[chiffres_lettres].default/chrome/themes.

1. La couleur de fond aussi, ce qu’on souhaite par forcément pusique elle dépend du thème, mais on peut l’exclure en la commentant, et décommantant background: var(--folder-tree-background-color) !important;, quand on change de thème, pour pouvoir récupérer la couleur de fond du thème sélectionné.

Le résultat final

Voici le résultat obtenu avec mes modifications. Le choix du personnage casse une référence à 2 octets en rapport avec le surnom du personnage, saurez-vous la retrouvez ?

Thunderbird with modified monterail theme
Thunderbird with modified monterail theme
Conclusion

J’ai pas encore eu l’occasion de tester, mais je me demande si remplacer la propriété background: et background-color:, partout la valeur correspondante est var(*-background-color);, ne permet pas un bon fonctionnement avec background-image: var(*-background-image); ?
Le but est de pouvoir avoir l’image de fond ET la couleur de fond dans un même bloc, mais en passant par des variables.

Et si quelqu’un sait comment virer le 2ᵉ arrière blanc blanchâtre, ça m’intéresse également.

Leave a Reply

Your email address will not be published. Required fields are marked *