[astuce] Firefox et le about:newtab en sombre
Dans firefox, le thème par défaut est celui qui s’adapte le mieux au thème GTK du système (sous Linux Mint Mate).
Le thème sombre du système se répercute bien sur les onglets et le chrome, mais pas la page d’un onglet vierge, qui est alors clair.
Je pourrais utiliser le thème sombre de Firefox, mais comme j’ai dit, ce dernier n’est pas intégré correctement avec le thème GTK.
Ici, une astuce qui prend le CSS du nouvel onglet du thème Firefox sombre pour l’utiliser dans le thème Firefox par défaut.
Dans le dossier .profile de Firefox, allez dans le dossier chrome, et faites-y un fichier userContent.css.
Copiez-y ceci :
@-moz-document url(about:newtab) {
body {
--newtab-background-color: rgba(42, 42, 46, 1)!important;
--newtab-text-primary-color: rgba(249, 249, 250, 1)!important;
--newtab-border-primary-color: rgba(249, 249, 250, 0.8)!important;
--newtab-border-secondary-color: rgba(249, 249, 250, 0.1)!important;
--newtab-button-primary-color: #0060DF!important;
--newtab-button-secondary-color: #38383D!important;
--newtab-element-active-color: rgba(249, 249, 250, 0.2)!important;
--newtab-element-hover-color: rgba(249, 249, 250, 0.1)!important;
--newtab-icon-primary-color: rgba(249, 249, 250, 0.8)!important;
--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4)!important;
--newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4)!important;
--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2)!important;
--newtab-inner-box-shadow-color-nte: rgba(21, 20, 26, 0.5)!important;
--newtab-tile-shadow-secondary: rgba(21, 20, 26, 0.75)!important;
--newtab-link-primary-color: #45A1FF!important;
--newtab-link-secondary-color: #50BCB6!important;
--newtab-text-conditional-color: #F9F9FA!important;
--newtab-text-secondary-color: rgba(249, 249, 250, 0.8)!important;
--newtab-textbox-background-color: #38383D!important;
--newtab-textbox-border: rgba(249, 249, 250, 0.2)!important;
--newtab-textbox-focus-color: #45A1FF!important;
--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3)!important;
--newtab-background-button-color: rgba(80, 80, 80, 0.5)!important;
--newtab-background-button-text-color: #CDCDD4!important;
--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5)!important;
--newtab-background-button-active-color: rgba(173, 173, 173, 0.5)!important;
--newtab-feed-button-background: #38383D!important;
--newtab-feed-button-text: #F9F9FA!important;
--newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6)!important;
--newtab-feed-button-text-faded: rgba(249, 249, 250, 0)!important;
--newtab-feed-button-spinner: #D7D7DB!important;
--newtab-contextmenu-background-color: #4A4A4F!important;
--newtab-contextmenu-button-color: #2A2A2E!important;
--newtab-modal-color: #2A2A2E!important;
--newtab-overlay-color: rgba(12, 12, 13, 0.8)!important;
--newtab-section-header-text-color: rgba(249, 249, 250, 0.8)!important;
--newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8)!important;
--newtab-section-active-contextmenu-color: #FFF!important;
--newtab-search-border-color: rgba(249, 249, 250, 0.2)!important;
--newtab-search-dropdown-color: #38383D!important;
--newtab-search-dropdown-header-color: #4A4A4F!important;
--newtab-search-header-background-color: rgba(42, 42, 46, 0.95)!important;
--newtab-search-icon-color: rgba(249, 249, 250, 0.6)!important;
--newtab-search-wordmark-color: #FFF!important;
--newtab-topsites-background-color: #38383D!important;
--newtab-topsites-icon-shadow: none!important;
--newtab-topsites-label-color: rgba(249, 249, 250, 0.8)!important;
--newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1)!important;
--newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1)!important;
--newtab-card-active-outline-color: #4A4A4F!important;
--newtab-card-background-color: #38383D!important;
--newtab-card-hairline-color: rgba(249, 249, 250, 0.1)!important;
--newtab-card-placeholder-color: #4A4A4F!important;
--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2)!important;
--newtab-snippets-background-color: #38383D!important;
--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1)!important;
--newtab-background-primary-text-color: #CDCDD4!important;
--newtab-focus-outline: rgba(80, 145, 241, 0.5)!important;
--newtab-focus-border: #B5D3FF!important;
--newtab-focus-border-selected: #B5D3FF!important;
--newtab-primary-action-background: #4484E2!important;
--newtab-primary-action-background-off: #6A6A6F!important;
--newtab-seperator-line-color: #53515F!important;
--customize-menu-primary-text-color: #E0E0E6!important;
--customize-menu-check-fill: #E0E0E6!important;
--customize-menu-background: #38383D!important;
--customize-menu-secondary-action-background: #515156!important;
--customize-menu-secondary-action-background-hover: #606065!important;
--customize-menu-secondary-action-background-active: #6F6F74!important;
--customize-menu-seperator-line-color: #53515F!important;
--customize-menu-first-shadow: rgba(21, 20, 26, 0.5)!important;
--customize-menu-second-shadow: rgba(21, 20, 26, 0.75)!important;
--customize-menu-primary-action-text: #E0E0E6!important;
--customize-menu-line-color: #B9B7CC!important;
--newtab-search-first-shadow: rgba(21, 20, 26, 0.5)!important;
--newtab-search-second-shadow: rgba(21, 20, 26, 0.75)!important;
--newtab-search-text-color: #B1B1BD!important;
--newtab-card-first-shadow: rgba(21, 20, 26, 0.5)!important;
--newtab-card-second-shadow: rgba(21, 20, 26, 0.75)!important;
--newtab-wordmark-color: #FFF!important;
}
}Enregistrez le fichier.
Fermez l’éditeur.
Maintenant, dans Firefox, allez dans about:config et créez une clé toolkit.legacyUserProfileCustomizations.stylesheets de type boolean et mettez-là à true.
Relancez Firefox.
Voilà.
Maintenant ça ressemble à ça :
https://lehollandaisvolant.net/img/7a/screenshot-firefox.png
Alors qu’avec le thème sombre de Firefox, on avait la barre sous les onglets qui n’étais pas pareil que la barre de titre (aux couleurs du système) et avec le thème par défaut (comme là), la barre des onglets était bonne, mais la page newtab était claire.
D’ailleurs là, le fond de la page newtab n’est pas exactement la même couleur que celle de la barre de titre.
ÉDIT : pour ceux qui se demandent, je suis en train de faire un thème sombre pour mes sites.
Je commence actuellement par mes petits outils en ligne (c’est pas encore en ligne). Après je ferais le blog, puis peut-être CS (le site est déjà relativement sombre).