土曜日のマデーニ: Thunderbird の背景色をカスタマイズ

みんな大好き、userChrome.css を使って Thunderbird の外観をカスタマイズしてみました。今回カスタマイズしたのはメール一覧の背景部分です。

（きっかけ）

なんかの拍子で Thunderbird のテーマを標準インストールされている「Dark」に変更してみたところ、メール一覧の配色も変わったことに気づきました。ダークテーマ自体はしっくりこなかったのですぐに元に戻してしまったんですが、メール一覧の配色は変えてみたいな、と思ったわけです。

ちなみに、普段は「システムテーマ」というテーマを使っています。

（テーマに挑戦）

ということで、まずは他のユーザーが作成・配布しているテーマを少し試してみたのですが、ウィンドウ上部のパネル部分の配色しか変わらず、メール一覧の配色を変えるテーマというのは配布されていないようでした。

ということは、自分でテーマを作成すれば好みの配色に変えられるのか？ということで Thunderbird のテーマ作成方法の調査に取り掛かりました。

が、ほどなく断念。

断念ということか、調べているうちに userChrome.css で変更できそうだ、ということがわかったのでテーマを作成するのは中断しました。

（userChrome.css での変更）

結論からいうと、これで落ち着きました。なかなかいい感じです。

ちなみに、Flatpak 版の Thunderbird 102.6.1 になります。以下、手順です。

step1 ファイルの作成

以下のディレクトリーを作成します。いま使っているプロファイルが格納されているディレクトリーの直下に「chrome」という名前のディレクトリーを新規に作成します。

~/.var/app/org.mozilla.Thunderbird/.thunderbird/xxxx.default/chrome

さらに、作成した「chrome」というディレクトリーの中に「userChrome.css」という名前のファイルを作成します。この時点では中身は空っぽで大丈夫です。

step2 ファイルの編集

userChrome.css を以下のように編集します。

@namespace xul url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#threadTree treechildren::-moz-tree-row(odd) {
	background-color: #eef6ee !important;
}

#threadTree treechildren::-moz-tree-row(even) {
	background-color: #e6f2ff !important;
}

#threadTree treechildren::-moz-tree-cell-text(unread) {
  color: #994d00 !important;
}

1つ目の -moz-tree-row(odd) では奇数行の背景色を変更しています。

2つ目の -moz-tree-row(even) では偶数行の背景色を変更しています。

どちらか一方だけを変更している人が多いようです。いろいろ試してみて、お好みの指定を発見してみましょう。

3つ目の -moz-tree-cell-text(unread) は未読メッセージの文字色を変更しています。これは背景色を固めてから、その背景色に合う色を選んだ方がよいかと思います。

step3 設定エディターの変更

ファイルを用意しただけでは Thunderbird に反映されません。userChrome.css を使用するように Thunderbird の設定を変更します。

「設定」「設定エディター」で以下のように変更します。

toolkit.legacyUserProfileCustomizations.stylesheets = true

step4 Thunderbird の再起動

ここまで準備ができたら Thunderbird を再起動します。起動が完了すると userChrome.css で指定した配色が反映されているかと思います。

step5 微調整

指定した配色がしっくりこない場合は再度 userChrome.css を編集すればよいのですが、userChrome.css を編集しても即座には Thunderbird には反映されないため、Thunderbird を再起動する必要があります。これがちょっともどかしいです。

調整中の時だけでも「アカウント設定」「サーバー設定」「新着メッセージがないか起動時に確認する」を off にしても良いかもしれません。

設定エディターの項目名に「legacyUserProfileCustomizations」とあるくらいなので、将来的にはこの手法での背景色のカスタマイズができなくなってしまうかもしれません。

その時が来たらまたオリジナルテーマの作成方法をちゃんと学んでみましょうかね。テーマだと Thunderbird を起動したままでも動的に配色が変わってくれますし。

（追記）

先に紹介した userChrome.css の定義内容では、メール一覧のカーソル行、かつ既読メールの場合に文字色が白になってしまい、既読メールの件名が判別しづらい状態であることが判明しました。

それを解消したバージョンの userChrome.css 定義内容です。

@namespace xul url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#threadTree treechildren::-moz-tree-row() {
	background-color: #eef6ee;
}

#threadTree treechildren::-moz-tree-cell-text(unread) {
  color: #994d00 !important;
}

反映結果はこのようなイメージになります。

下記の指定の「!important」が「この指定を強制する」みたいな意味合いで、これが悪さをしていたようです。

background-color: #eef6ee !important;

外すと今度は下記の指定の「odd」「even」が効かなくなるのであきらめました。

-moz-tree-row(odd)

未読メッセージの色の指定は !important が付加されていないと変更されなかったため、これは付加したままにしています。

#threadTree treechildren::-moz-tree-cell-text(unread) {
color: #994d00 !important;
}

土曜日のマデーニ

ページ

2023-01-27

Thunderbird の背景色をカスタマイズ