Firefox91以降でタイトルバーをOSに合わせる

参考

https://famd.hatenablog.com/entry/2021/06/06/213130

概要

Firefox91以降Proton UIが強制的に適用される。
これによりウインドウのアクティブ、非アクティブに関わらずタイトルバーの色が白になった。
そのためアクティブウインドウがどれなのかわかりにくい状態になっている。
以下にバージョン毎のタイトルバーの色の指定方法を記載する。

Firefox 138以降

Windowsのアクセント色を指定できるようになった。ただ非アクティブ時の色が灰色ではなく、見にくいためstylesheetで修正する。

1. Windowsのアクセント色を有効にする
   1. about:config を開く
   2. browser.theme.windows.accent-color-in-tabs.enabled を true にする
2. カスタムcssを使えるようにする
   1. about:config を開く
   2. toolkit.legacyUserProfileCustomizations.stylesheets を true にする
3. カスタムcssを作成する
   1. プロファイルディレクトリ\chrome\userChrome.css を作成する
   2. 以下の内容を記載する

 /* アクティブ時：OSのアクセントカラー */
 /* :is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
   color: AccentColorText;
   background-color: AccentColor;
 } */
 
 /* 非アクティブ時：灰色を指定 */
 :is(#TabsToolbar, #toolbar-menubar):-moz-window-inactive {
   color: black !important;
   background-color: #F3F3F3 !important; /* お好みの灰色に */
   background-image: none !important;
   opacity: 1 !important;
 }
 
 /* タブとタブバーの高さを調整 */
 :root {
   --tab-min-height: 26px !important;
 }
 :root[uidensity="compact"] {
   --tab-min-height: 26px !important;
 }
 
 /* ブックマークアイテムの高さを変える */
 .bookmark-item,
 .bookmark-item > menupopup,
 .bookmark-item > menupopup > menuitem {
   padding-block: 0.2em !important;
 }

Firefox 103以降

 Firefox 91以降からの変更点

-moz-accent-color-foreground は AccentColorText に変更
-moz-accent-color は AccentColor に変更

 手順

1. カスタムcssを使えるようにする
   1. about:config を開く
   2. toolkit.legacyUserProfileCustomizations.stylesheets を true にする
2. カスタムcssを作成する
   1. プロファイルディレクトリ\chrome\userChrome.css を作成する
   2. 以下の内容を記載する

 /* ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更（以前の規定テーマと同じ） */
 :is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
   /* color: -moz-accent-color-foreground;
   background-color: -moz-accent-color; */
   color: AccentColorText;
   background-color: AccentColor;
 }
 
 /* タブとタブバーの高さを調整 */
 :root {
   --tab-min-height: 26px !important;
 }
 :root[uidensity="compact"] {
   --tab-min-height: 26px !important;
 }
 
 /* ブックマークアイテムの高さを変える */
 .bookmark-item,
 .bookmark-item > menupopup,
 .bookmark-item > menupopup > menuitem {
   padding-block: 0.2em !important;
 }

Firefox 91以降

 手順

1. カスタムcssを使えるようにする
   1. about:config を開く
   2. toolkit.legacyUserProfileCustomizations.stylesheets を true にする
2. カスタムcssを作成する
   1. プロファイルディレクトリ\chrome\userChrome.css を作成する
   2. 以下の内容を記載する

/* ウインドウアクティブ時のタイトルバーの背景色をOSのテーマ色に変更（以前の規定テーマと同じ） */
:is(#TabsToolbar, #toolbar-menubar):not(:-moz-window-inactive) {
  color: -moz-accent-color-foreground;
  background-color: -moz-accent-color;
}

/* タブとタブバーの高さを調整 */
:root {
  --tab-min-height: 26px !important;
}
:root[uidensity="compact"] {
  --tab-min-height: 26px !important;
}

/* ブックマークアイテムの高さを変える */
.bookmark-item,
.bookmark-item > menupopup,
.bookmark-item > menupopup > menuitem {
  padding-block: 0.2em !important;
}