* 2021/10/07
Firefox 92 (proton) でアクティブウィンドウのメインメニューバー（タブバーがならぶ所）の背景色を変更し、Windows のアクセントカラーにした。
* 2022/07/28
Firefox 103 で設定の名前が変更されたらしく、以前の設定ではメインメニューバーやタブバーにWindowsのアクセントカラーを反映させることができなくなった。
-moz-accent-color と -moz-accent-color-foreground が AccentColor と AccentColorText に変更された模様
参考サイト How to Get Windows Accent Colors back in Firefox 92? を確認すると、Firefox103を含めて、いくつか設定が更新されていたので下記を修正する。
* 方法
userChrome.css というファイルに設定を書くことで、Firefox のUIを変更する。
(1) about:config の変更
デフォルトだと userChrome.css の設定を無視するので、反映するようにFirefox の設定を変更する。
URLバーに about:config と打ち込む。
表示されるページから toolkit.legacyUserProfileCustomizations.stylesheets という項目をさがす。
その値を false から true に変更する。
(2) Firefox のプロファイルフォルダーの下に、chromeというフォルダを作る。
まず、Firefox のプロファイルフォルダーを開く。
URLバーに about:support と打ち込むか、メニューからヘルプ → 他のトラブルシューティング情報で「トラブルシューティング情報」を表示する。
「アプリケーション基本情報」にある「プロファイルフォルダー」からフォルダーを開くことができる。
その中に chrome という名前のフォルダを作成する。
(3) userChrome.css というファイルを作成する。
上で作成した chrome というフォルダを開き、その中に新規テキストファイルを作成したあと、名前を userChrome.css に変更する。
拡張子を txt から css に変更するのに気をつけてください。
(4) userChrome.css に設定を書き込む。
下の内容をファイルに書き込み保存する。
Firefox 103 からの設定
/* Show active colors on main menu bar */
#TabsToolbar,
#navigator-toolbox,
#tabs-newtab-button,
#titlebar toolbarbutton:not(:hover):not(:active),
#scrollbutton-up:not(:hover):not(:active),
#scrollbutton-down:not(:hover):not(:active),
.titlebar-color {
background: AccentColor !important;
color: AccentColorText;
fill: AccentColorText !important;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive,
#tabs-newtab-button:-moz-window-inactive,
#titlebar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,
#scrollbutton-up:not(:hover):not(:active):-moz-window-inactive,
#scrollbutton-down:not(:hover):not(:active):-moz-window-inactive,
.titlebar-color {
background: unset !important;
color: unset;
fill: unset !important;
transition: none !important;
}
Firefox 92 の頃の設定
/* Show active colors on main menu bar */
#TabsToolbar,
#navigator-toolbox {
background: -moz-accent-color !important;
color: white;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive {
background: unset !important;
color: unset;
}
(5) Firefoxs を再起動する。
変更を有効化するには、about:support（ヘルプ → 他のトラブルシューティング情報）のページで「起動時キャッシュを消去…」をクリックすると、Firefox が再起動する。
* 参考サイト
How to Get Windows Accent Colors back in Firefox 92?
* 背景
2021年6月に Firefox 89 が公開され、proton というデザインが採用された。
89と90の間は proton を無効にして従来のデザインのままにすることができた。
8月に Firefox 91 が公開されると、 proton を無効にすることができなくなった。
個人的には、デザインの変更に違和感があったが、使いやすさなどはともかく、そのうち慣れるだろうと思っていたし、実際慣れた。
ただ、私の使い方だとしばしば困ることがあった。
これはFirefox の問題というより、Windows のUWP (Universal Windows Platform) のデザインの問題なのかもしれない。
デスクトップアプリであれば、Windowsの設定からアクセントカラーを選ぶことで、アクティブウィンドウのタイトルバーに反映させることができた。
UWPアプリだと、タイトルバーの色を変更できないうえに、アクティブウィンドウと非アクティブウィンドウで（ほとんど？）違いがない。
アクティブウィンドウには、ウィンドウのまわりに影をつけることができるが、注意して見ればわかる程度。
アクティブウィンドウと非アクティブウィンドウが重なっていない限り、パッと見では区別しにくい。
どちらが上（アクティブ）なのかわかりにくいので、どれがアクティブなのかと考えた上で、迷ったらウィンドウをクリックしてから操作することになる。
複数のウィンドウをまたいで作業をしている時や注意していない時は、しばしば別のウィンドウを操作してしまうはめになった。
