Firefox開発者ツールのテーマをハック＆パーソナライズする方法

テーマは私たちの開発者にとって個人的なものです、それは単にエディタやツールの美化についてではありません。私たちが注視しているスクリーンを（明滅させることなく）何時間にもわたって生産的な方法で作業するのに耐えられるものにすることです。 Firefoxには、開発者向けツールという2つのテーマがあります。それは、暗いと明るいです。どちらも素晴らしいですが、それらをパーソナライズする方法がないとオプションはまだ限られています.

現在、FirefoxはそのUIにXULとCSSの組み合わせを使用しています。つまり、その外観の大部分はCSSだけを使用して調整できるということです。 Mozillaはユーザーが "userChrome.css"と呼ばれるCSSファイルでその製品の外観を設定する方法を提供します。あなたはできる そのCSSファイルにカスタムスタイルルールを追加する そしてそれはMozilla製品に反映されるでしょう.

この記事では、同じCSSファイルを使ってFirefoxの開発者ツールをカスタマイズします。.

まず、そのCSSファイルを見つけるか、作成して正しい場所に配置する必要があります。 "userChrome.css"を格納するフォルダを見つける1つの簡単な方法は about：support ブラウザで 「Profile Folder」というラベルの横にある「Show Folder」ボタンをクリックします。. これでFirefoxの現在のプロファイルフォルダが開きます.

プロファイルフォルダには、 "chrome"という名前のフォルダがあります。存在しない場合は、作成してその中に "userChrome.css"を作成します。ファイルの設定が完了したので、コードに移りましょう。.

：root.theme-dark --theme-body-background：＃050607！重要です。 --theme-sidebar-background：＃101416！重要です。 --theme-tab-toolbar-background：＃161A1E！重要です。 --theme-toolbar-background：＃282E35！重要です。 --theme-selection-background：＃478DAD！重要です。 -  theme-body-color：＃D6D6D6！重要です。 --theme-body-color-alt：＃D6D6D6！重要です。 --theme-content-color1：＃D6D6D6！重要です。 --theme-content-color2：＃D6D6D6！重要です。 --theme-content-color3：＃D6D6D6！重要です。 --theme-highlight-green：＃8BF9A6！重要です。 --theme-highlight-blue：＃00F9FF！重要です。 -  theme-highlight-bluegrey：白！重要です。 --theme-highlight-lightorange：＃FF5A2C！重要です。 - テーマハイライトオレンジ：黄色！ -  theme-highlight-red：＃FF1247！重要です。 --theme-highlight-pink：＃F02898！重要です。 

上記で見たものは、私が "userChrome.css"ファイルに追加して開発者ツールの外観を変更するコードです。

これに：

暗いテーマの背景が濃く、テキストが明るい場合は、コントラストをもう少し向上させたいだけでした（カラースキームが苦手です）。そのため、暗いテーマで一般的に使用されている基本色はそのまま使用しました。あなたが色をよりよくしているならば、あなたがあなたが使用しているテーマのためのより良いマッチを見つけるためにあなたが合うと思うように色を使ってあなた自身で実験してください.

このコードは、DevToolsのさまざまなUI部分に色を付けるために使用されるCSSカラー変数の単なるリストです。このコードは、 "variables.css"というファイルに圧縮ファイルの中で見つかりました。 “omn​​i.ja”：

Windowsでは、ファイルは次の場所にあります。

F：/firefox/browser/omni.ja. 交換する F： Firefoxをインストールしたドライブで.

OSXでは、ファイルは次の場所にあります。

〜/アプリケーション/ Firefox.app /コンテンツ/リソース/ブラウザ/ omni.ja.

これらは圧縮されたJavaファイルです。 Windowsでは、名前を変更できます。 .ja への拡張 .ジップ ネイティブのWindowsエクスプローラの抽出ユーティリティを使用して、その中のファイルをアンロードします。 OSXで、ターミナルに移動して実行します omn​​i.jaを解凍する. その前に、ファイルのコピーを別のディレクトリに作成するようにしてください。.

omn​​i.jaが解凍されると、ファイルは次の場所にあります。 /chrome/devtools/skin/variables.css;はい、Firefox DevToolsスキンはという名前のフォルダの下にあります。 クロム. の中に variables.css, 次のように、明るいテーマと暗いテーマの両方に使用されるたくさんの色変数が表示されます。

 ：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; - テーマ選択背景半透明：ｒｇｂａ（７６、１５８、２１７、．２３）。 -  theme-selection-color：＃f5f7fa; -  theme-splitter-color：#aaaaaa; -  theme-comment：＃757873; - テーマボディカラー：＃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; / *パフォーマンスツールのように、グラフで使われる色。 Chromeのタイムラインと似た色。 * /  -  theme-graph-green：＃85d175; -  theme-graph-blue：＃83b7f6; -  theme-graph-bluegrey：＃0072ab; -  theme-graph-purple：＃b693eb; --theme-graph-yellow：＃efc052; -  theme-graph-orange：＃d97e00; -  theme-graph-red：＃e57180; --theme-graph-grey：#cccccc; -  theme-graph-full-red：＃f00; -  theme-graph-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-color：＃f5f7fa; - テーマ分割色：黒。 -  theme-comment：＃757873; - ボディカラー：＃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; / *パフォーマンスツールのように、グラフで使われる色。ほとんどの "highlight- *"色に似ています。 * /  -  theme-graph-green：＃70bf53; -  theme-graph-blue：＃46afe3; -  theme-graph-bluegrey：＃5e88b0; -  theme-graph-purple：＃df80ff; -  theme-graph-yellow：＃d99b28; -  theme-graph-orange：＃d96629; -  theme-graph-red：＃eb5368; -  theme-graph-grey：＃757873; -  theme-graph-full-red：＃f00; -  theme-graph-full-blue：＃00f;  

ターゲットにしたいテーマと変数を選択して、それらを "userChrome.css"に追加します。.

これが私の開発者ツールのウィンドウのスクリーンショットです。.