Rendre Firefox plus sombre

Firefox s’est doté d’un thème sombre depuis la version 65 mais il y a des petites choses qui n’étaient pas sombres malgré tout et j’ai enfin trouvé une solution !

🔗Les soucis

Parmi les nuisances plombant le thème sombre, les barres de défilement ne sont pas affectées et restent dans la couleur de l’OS. Pas trop gênant la plupart du temps, cela saute aux yeux lorsqu’on a une scrollbar au milieu d’une page web qui est elle même sombre.

Autant celle de droite, étant en bordure, ça passe, autant celle de gauche…

Mais on est dans l’ordre du détail, j’en conviens parfaitement. Non, le truc qui me gênait le plus, c’est à chaque fois qu’on ouvre un onglet, pendant que ça charge, la page entière est blanche. En quoi est-ce un problème me demanderez-vous alors ? Si je préfère le thème sombre dans toutes les applications qui le proposent, c’est parce que les thèmes clairs m’agressent les yeux.

Ça me fait littéralement mal. Oui, la pièce où je travail n’est pas un exemple d’éclairage, mais je trouve le thème sombre plus reposant pour ma vue. À tel point que j’ai même ouvert un ticket sur le Bugzilla de Firefox, non traité à ce jour.

🔗Le sauveur

C’est alors qu’un soir, me faisant péter la rétine encore une fois par cet écran blanc, je me décide à chercher une bidouille pour arranger ça. Je découvre alors Quantum Nox qui est une révision totale des couleurs de Firefox en exploitant les capacités d’agir sur le navigateur avec des CSS chargées au démarrage.

Cette fonctionnalité était automatique avant, mais a partir de Firefox 69, elle a été désactivée par défaut, améliorant les performances pour ceux qui ne s’en servent pas (la majorités des utilisateurs).

Pour la réactiver, il faut aller dans about:config et passer l’option toolkit.legacyUserProfileCustomizations.stylesheets à true.

Ces fichiers CSS doivent se trouver dans <profile firefox>/chrome/. Chaque fichier agissant sur différents aspects du navigateur, userContent.css affectant les éléments dans une page web et userChrome.css s’occupant des éléments de l’interface de Firefox.

Le thème proposé change beaucoup de choses dans Firefox et certain choix sont trop bling bling à mon goût. J’ai donc plongé dans le code pour extraire seulement les parties qui m’intéressent.

🔗La scrollbar

La gestion de la barre de défilement se fait dans le fichier userContent.css :

:root {
/* These variable changes the scrollbars size and color. If you use the JS
method instead, you don’t need to change these.
The scrollbars-width only has 3 acceptable values, auto, thin, and none:
auto = default OS size | thin = half the width (will be hidden in about: pages) 
 | none = hidden scrollbar */
    --scrollbars-width: auto;
    --scrollbars-thumb-color: #404040;
    --scrollbars-track-color: #2b2b2b;
}

:root {
  scrollbar-color: var(--scrollbars-thumb-color) 
                  var(--scrollbars-track-color) !important;
  scrollbar-width: var(--scrollbars-width) !important;
}

*|* {
  scrollbar-width: var(--scrollbars-width) !important;
}

Pour ce résultat :

Et voilà, fini les scrollbars trop claires !

🔗La page blanche

Pour cet élément, c’est le fichier userChrome.css qu’il faut créer/éditer :

/* DO NOT DELETE THIS LINE */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* v Fix to make the pre-render loading page dark instead of white v */
#tabbrowser-tabpanels {background: #202020 !important}

C’est tout ! Fini le « cramage » de rétine lors de l’ouverture d’onglet !

🔗Niveau bonus !

En plus de régler les soucis principaux que j’avais avec le thème sombre, j’ai découvert d’autres bidouilles pour minimiser encore plus les gênes oculaires !

Le menu contextuel, celui qui apparaît sur un clic droit, est lui aussi paramétrable mais le code étant bien plus touffu, je vous laisse le fichier entier.

Dans ce fichier, on peut aussi remarquer le petit bout de code suivant :

tooltip, #statuspanel-label {
  -moz-appearance: none !important;
  background: rgba(60,60,60,0.9) !important;
  color: #eee !important;
  border: 1px solid #333 !important;
}

Qui permet de rendre les tooltips plus sombres aussi.

🔗Conclusion

Ce n’est pas parfait, surtout au niveau du menu contextuel où l’auteur original a choisi de changer l’espacement des éléments et je n’ai pas pris le temps de creuser pour garder le layout intact, mais ça me convient pour l’instant, en attendant que le thème sombre de Firefox s’améliore. Notez aussi que parfois, c’est le site web qui choisi d’avoir un fond tout blanc, même si vous lui avez demandé un thème sombre qui est pourtant disponible. Je pense notamment à YouTube qui continue à m’exploser les yeux au chargement car ils ont mis un fond blanc par défaut, avant que leur thème sombre ne se charge. :’(