トップ 差分 一覧 ソース 置換 検索 ヘルプ PDF RSS ログイン

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

参考

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

概要

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

タイトルバーの色をOSに合わせる

 手順

  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;
}

Firefox 103以降

以下の変更があるので注意
-moz-accent-color-foreground は AccentColorText に変更
-moz-accent-color は AccentColor に変更

 /* ウインドウアクティブ時のタイトルバーの背景色を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;
 }

[カテゴリ: ツール > Web > Firefox]

[通知用URL]



  • Hatenaブックマークに追加
  • livedoorクリップに追加
  • del.icio.usに追加
  • FC2ブックマークに追加

最終更新時間:2022年07月31日 13時25分37秒