Firefox:プライベートモードのメニューやタブの色を変更

プライベートモードのメニューやタブの色をカスタマイズしたい場合、userChrome.cssファイルを新たに作成することでカスタマイズすることが可能です。カスタマイズされたFirefoxを見かけると思いますがそれらはすべてuserChrome.cssを作成してカスタマイズしています。

その他にもカスタマイズするための設定やデバック方法などの詳細は下記で解説していますのでご覧ください。

作成手順

まずabout:configをアドレスバーに入力して下記のプレファレンス名をtrueに設定します。user.jsの場合は下記のコードを貼り付けます。この設定をすることでuserChrome.cssやuserContent.cssにアクセスすることが可能になります。

// about:configの場合　下記をtrueにする
toolkit.legacyUserProfileCustomizations.stylesheets
devtools.debugger.remote-enabled
devtools.chrome.enabled

// user.jsの場合
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
user_pref("devtools.debugger.remote-enabled", true);
user_pref("devtools.chrome.enabled", true);

上記の設定を終えたらFirefoxを再起動します。

続いてabout:supportを開き【プロファイルフォルダー】にある【フォルダーを開く】を選択します。

開いたらchromeとフォルダーを作成してその中にuserChrome.cssを作成してください。

chrome/
└── userChrome.css

ここにカスタマイズしたいcssを記述していきます。タブやメニューなどの要素を検証していきます。上記の設定を問題なく終えていればCtrl + Shift + Alt + Iを押すとブラウザツールボックスが開かれます(Macの場合Cmd+Opt+Shift+I)。OKを選択します。

すると下記のようにタブやメニューなどを検証することができます。

細かなことは割愛しますが、今回はプライベートモードのタブやメニューの色を変更するのでその要素を検証してuserChrome.cssに記述します。プライベートモードのタブとメニューの要素は下記の要素を指定することで変更可能です。

/* メニューバーの色 */
#main-window[privatebrowsingmode="temporary"] #TabsToolbar{
    background: #2a292e !important;
    color: #fff !important;
}

/* 現在のタブの色 */
.tab-background {
    &:is([selected], [multiselected]){
        background-color: #f9f9fb !important;
        color: #111 !important;
    }
}

最後再起動をお忘れずに。