Wie Sie Ihr Firefox Developer Tools Theme hacken und personalisieren

Themes sind für uns Entwickler eine persönliche Sache, es geht nicht nur um die Verschönerung von Editoren oder Tools. Es geht darum, den Bildschirm, auf den wir starren werden (ohne viel zu blinken), erträglicher zu gestalten, damit er stundenlang und produktiv arbeiten kann. Firefox hat zwei Themen für Entwickler-Tools: dunkel und hell. Beide sind großartig, aber die Möglichkeiten sind immer noch begrenzt, ohne sie zu personalisieren.

Firefox verwendet jetzt eine Kombination aus XUL und CSS für seine Benutzeroberfläche, was bedeutet, dass der Großteil seines Erscheinungsbildes nur mit CSS angepasst werden kann. Mozilla bietet Benutzern die Möglichkeit, das Erscheinungsbild der Produkte mit einer CSS-Datei mit dem Namen "userChrome.css" zu konfigurieren. Sie können Fügen Sie der CSS-Datei benutzerdefinierte Stilregeln hinzu und es wird auf die Mozilla-Produkte reflektiert.

In diesem Beitrag verwenden wir dieselbe CSS-Datei, um die Entwickler-Tools in Firefox zu personalisieren.

Zuerst müssen wir die CSS-Datei finden oder eine erstellen und an der richtigen Stelle ablegen. Ein schneller Weg, um den Ordner zu finden, in dem sich "userChrome.css" befindet, ist zu gehen über: unterstützung im Browser und Klicken Sie auf die Schaltfläche "Ordner anzeigen" neben der Bezeichnung "Profilordner".. Dadurch wird der aktuelle Profilordner von Firefox geöffnet.

Im Profilordner wird ein Ordner mit dem Namen "Chrome" angezeigt. Wenn es nicht vorhanden ist, erstellen Sie eine und erstellen Sie eine "userChrome.css" darin. Nun, da das Einrichten der Datei abgeschlossen ist, gehen wir zum Code über.

: root.theme-dark --theme-body-background: # 050607! important; --theme-sidebar-background: # 101416! wichtig; --theme-tab-toolbar-background: # 161A1E! wichtig; --theme-toolbar-background: # 282E35! wichtig; --theme-selection-background: # 478DAD! wichtig; --theme-körperfarbe: # D6D6D6! wichtig; --theme-body-color-alt: # D6D6D6! wichtig; --theme-content-color1: # D6D6D6! wichtig; --theme-content-color2: # D6D6D6! wichtig; --theme-content-color3: # D6D6D6! wichtig; --theme-highlight-green: # 8BF9A6! wichtig; --theme-highlight-blue: # 00F9FF! wichtig; --them-highlight-blaugrau: weiß! wichtig; --theme-highlight-lightorange: # FF5A2C! wichtig; --them-highlight-orange: gelb! wichtig; --theme-highlight-red: # FF1247! wichtig; --theme-highlight-pink: # F02898! wichtig; 

Was Sie oben sehen, ist der Code, den ich meiner "userChrome.css" -Datei hinzugefügt habe, um das Erscheinungsbild von Entwicklertools daraus zu ändern

zu diesem:

Ich wollte den Kontrast nur mit dunklerem Hintergrund und hellerem Text im dunklen Thema ein wenig verbessern (ich bin auch nicht gut in Farbschemata), also habe ich mich bei einigen Grundfarben, die normalerweise in dunklen Motiven verwendet werden, geblieben. Wenn Sie mit Farben besser sind, experimentieren Sie selbst mit den Farben, die für Sie passend sind, um eine bessere Übereinstimmung mit dem von Ihnen verwendeten Thema zu finden.

Der Code ist nur eine Liste von CSS-Farbvariablen, die zum Einfärben der verschiedenen UI-Teile von DevTools verwendet werden. Wir haben den Code in einer Datei namens "variables.css" in einer komprimierten Datei namens gefunden “omni.ja”:

In Windows befindet sich die Datei unter:

F: /firefox/browser/omni.ja. Ersetze das F: mit dem Laufwerk, auf dem Sie Ihren Firefox installiert haben.

In OSX befindet sich die Datei unter:

~ / Applications / Firefox.app / Contents / Resources / browser / omni.ja.

Dies sind komprimierte Java-Dateien. In Windows können Sie das umbenennen .ja Erweiterung zu .Postleitzahl und verwenden Sie das native Windows Explorer-Extraktionsprogramm, um die darin enthaltenen Dateien zu entladen. Gehen Sie in OSX zu Terminal und führen Sie das Programm aus entpacken Sie omni.ja. Denken Sie daran, vorher eine Kopie der Datei in einem anderen Verzeichnis zu erstellen.

Sobald omni.ja extrahiert wurde, finden Sie die Datei unter /chrome/devtools/skin/variables.css; Ja, der Firefox DevTools-Skin befindet sich in einem Ordner namens Chrom. In dem variables.css, Sie sehen eine Reihe von Farbvariablen, die für die hellen und dunklen Themen wie folgt verwendet werden

 : root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; --theme-contrast-background: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; --theme-selection-background: # 4c9ed9; -themselection-background-semitransparent: rgba (76, 158, 217, .23); --theme-Auswahlfarbe: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; --theme-körperfarbe: # 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; / * Farben, die in Grafiken verwendet werden, wie z. B. Leistungstools. Ähnliche Farben wie die Timeline von 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-graphics-grey: #cccccc; --theme-graphs-full-red: # f00; --theme-graphics-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; --theme-contrast-background: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; -theme-selection-background-semitransparent: rgba (29, 79, 115, .5); --theme-Auswahlfarbe: # f5f7fa; --theme-splitter-farbe: schwarz; --theme-comment: # 757873; --theme-körperfarbe: # 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; / * Farben, die in Grafiken verwendet werden, wie z. B. Leistungstools. Meist ähnlich zu einigen "Highlight- *" - Farben. * / --theme-graphs-green: # 70bf53; --theme-graphics-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; --theme-graphs-purple: # df80ff; --theme-graphs-yellow: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; --theme-graphics-grey: # 757873; --theme-graphs-full-red: # f00; --theme-graphics-full-blue: # 00f;  

Wählen Sie das Thema und die Variablen aus, die Sie als Ziel festlegen möchten, und fügen Sie sie zu "userChrome.css" hinzu..

Hier sind einige weitere Screenshots des Fensters meiner Entwicklertools.