Comment pirater et personnaliser votre thème des outils de développement Firefox
Les thèmes sont une affaire personnelle pour nous développeurs, il ne s'agit pas uniquement d'embellir des éditeurs ou des outils. Il s’agit de rendre l’écran que nous regarderons (sans trop cligner des yeux) plus supportable au travail pendant des heures et de manière productive. Firefox a deux thèmes pour les outils de développement: sombre et clair. Les deux sont excellents, mais les options sont encore limitées sans un moyen de les personnaliser.
Maintenant, Firefox utilise une combinaison de XUL et CSS pour son interface utilisateur, ce qui signifie que la majeure partie de son apparence peut être modifiée en utilisant simplement CSS. Mozilla offre aux utilisateurs un moyen de configurer l'apparence de ses produits avec un fichier CSS appelé "userChrome.css". Vous pouvez ajouter des règles de style personnalisées à ce fichier CSS et ça va être réfléchi sur les produits Mozilla.
Dans cet article, nous utiliserons le même fichier CSS pour personnaliser les outils de développement dans Firefox..
Tout d’abord, nous devons trouver ce fichier CSS ou en créer un et le placer au bon endroit. Un moyen rapide de trouver le dossier qui hébergera "userChrome.css" est en allant à à propos de: support dans le navigateur et en cliquant sur le bouton "Afficher le dossier" à côté de l'étiquette "Dossier de profil". Cela ouvrira le dossier du profil actuel de Firefox.
Dans le dossier du profil, vous verrez un dossier nommé "chrome". Si ce n'est pas le cas, créez-en un et créez-y un "userChrome.css". Maintenant que la configuration du fichier est terminée, passons au code.
: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! important; --theme-tab-toolbar-background: # 161A1E! important; --theme-toolbar-background: # 282E35! important; --theme-selection-background: # 478DAD! important; --theme-body-color: # D6D6D6! important; --theme-body-color-alt: # D6D6D6! important; --theme-content-color1: # D6D6D6! important; --theme-content-color2: # D6D6D6! important; --theme-content-color3: # D6D6D6! important; --theme-highlight-green: # 8BF9A6! important; --theme-highlight-blue: # 00F9FF! important; --theme-highlight-bluegrey: blanc! important; --theme-highlight-lightorange: # FF5A2C! important; --theme-highlight-orange: jaune! important; --theme-highlight-red: # FF1247! important; --theme-highlight-pink: # F02898! important;
Ce que vous voyez ci-dessus est le code que j'ai ajouté à mon fichier "userChrome.css" pour changer l'apparence des outils de développement de cette page.
pour ça:
Je voulais seulement améliorer un peu plus le contraste avec un arrière-plan plus sombre et un texte plus clair dans le thème sombre (je ne suis pas non plus doué pour les arrangements de couleurs). Je suis donc resté avec certaines couleurs de base généralement utilisées dans les thèmes sombres. Si vous êtes plus doué avec les couleurs, testez vous-même les couleurs à votre guise pour trouver une meilleure correspondance avec le thème que vous utilisez..
Le code est juste une liste de variables de couleur CSS utilisées pour colorer les différentes parties d'interface utilisateur de DevTools. Nous avons trouvé le code dans un fichier appelé "variables.css" dans un fichier compressé nommé “omni.ja”:
Sous Windows, le fichier se trouve à l'adresse suivante:
F: /firefox/browser/omni.ja. Remplace le F: avec le lecteur où vous avez installé votre Firefox.
Sous OSX, le fichier se trouve à l'adresse suivante:
~ / Applications / Firefox.app / Contenu / Ressources / browser / omni.ja.
Ce sont des fichiers Java compressés. Sous Windows, vous pouvez renommer le .ja extension à .Zip *: français et utilisez l'utilitaire d'extraction natif de l'explorateur Windows pour décharger les fichiers qu'il contient. Sous OSX, accédez à Terminal et lancez décompressez omni.ja. N'oubliez pas de faire une copie du fichier dans un autre répertoire avant de le faire..
Une fois que omni.ja a été extrait, vous pouvez trouver le fichier à /chrome/devtools/skin/variables.css; oui, le skin Firefox DevTools se trouve dans un dossier nommé chrome. dans le variables.css, vous verrez un tas de variables de couleur utilisées pour les thèmes clair et foncé comme suit
: root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; --theme-contraste-background: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; --theme-selection-background: # 4c9ed9; –theme-selection-background-semi-transparent: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; --theme-body-color: # 18191a; --theme-body-color-alt: # 585959; --theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 667380; --theme-highlight-green: # 2cbb0f; --theme-highlight-blue: # 0088cc; --theme-highlight-bluegrey: # 0072ab; --theme-highlight-purple: # 5b5fff; --theme-highlight-lightorange: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Couleurs utilisées dans les graphiques, comme les outils de performance. Couleurs similaires à la timeline de Chrome. * / --theme-graphs-green: # 85d175; --theme-graphs-blue: # 83b7f6; --theme-graphs-bluegrey: # 0072ab; --theme-graphs-purple: # b693eb; --theme-graphs-yellow: # efc052; --theme-graphs-orange: # d97e00; --theme-graphs-red: # e57180; --theme-graphs-grey: #cccccc; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; --theme-contraste-background: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; –theme-selection-background-semi-transent: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --theme-splitter-color: noir; --theme-comment: # 757873; --theme-body-color: # 8fa1b2; --theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 5f7387; --theme-highlight-green: # 70bf53; --theme-highlight-blue: # 46afe3; --theme-highlight-bluegrey: # 5e88b0; --theme-highlight-purple: # 6b7abb; --theme-highlight-lightorange: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Couleurs utilisées dans les graphiques, comme les outils de performance. Principalement similaire à certaines couleurs "highlight- *". * / --theme-graphs-green: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; --theme-graphs-purple: # df80ff; --theme-graphs-yellow: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; --theme-graphs-grey: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;
Choisissez le thème et les variables que vous souhaitez cibler et ajoutez-les à votre "userChrome.css".
Voici quelques captures d'écran supplémentaires de la fenêtre de mes outils de développement.
