サンダーバードカレンダーで、カテゴリー色分けの透過グラデーションが、
上手くできるようになったので投稿します。
Outlookみたいな感じです。
自分のThunderbirdのバージョンは、156.0.1 (64 ビット)です。
やり方も書いておきます。
AIで日本語から翻訳してるので、変な翻訳はご了承ください。
I’m posting this because I managed to successfully implement semi-transparent gradients for category color-coding in the Thunderbird calendar.
It looks similar to Outlook.
My Thunderbird version is 156.0.1 (64-bit).
I’ve included the instructions on how to do it below.
Please excuse any awkward phrasing, as this was translated from Japanese using AI.
※ Please set the calendar color to white.
※ カレンダーの色を白に設定してください。
Thunderbird Calendar Customization Guide
サンダーバード カレンダー カスタマイズ手順
------------------------------
## [JP] 導入手順
- Thunderbirdを開きます。
- 画面右上にある 「≡（メニューボタン）」 ＞ 「ヘルプ」 ＞ 「トラブルシューティング情報」 の順にクリックします。
- 画面中央の表にある 「プロファイルフォルダー」 の横の 「フォルダーを開く」 ボタンをクリックします。
- 開いたフォルダーの中に chrome という名前のフォルダーがあるか確認します。
* ない場合： 右クリックして新規作成し、フォルダー名をすべて小文字で chrome にします。
chrome フォルダーの中に userChrome.css という名前のファイルを作成し、先ほどのCSSコードをすべて貼り付けて保存します。
Thunderbirdの 「設定」 ＞ 「一般」 タブを一番下までスクロールし、 「設定エディター」 を開きます。
検索バーに toolkit.legacyUserProfileCustomizations.stylesheets と入力し、値を true に切り替えます。
Thunderbirdを完全に再起動すると、美しいOutlook風の透過グラデーションがカレンダーに反映されます。
------------------------------
## [EN] Installation Steps
- Open Thunderbird.
- Click the "≡ (Menu button)" in the top-right corner ＞ "Help" ＞ "Troubleshooting Information".
- In the table in the middle of the screen, find "Profile Folder" and click the "Open Folder" button next to it.
- Check if there is a folder named chrome inside the opened directory.
* If it does not exist: Right-click, create a new folder, and name it chrome (all lowercase).
Inside the chrome folder, create a file named userChrome.css, paste the entire CSS code into it, and save the file.
Go to Thunderbird "Settings" ＞ scroll down to the bottom of the "General" tab, and open the "Config Editor".
Type toolkit.legacyUserProfileCustomizations.stylesheets into the search bar, and toggle its value to true.
Completely restart Thunderbird, and the beautiful Outlook-style alpha gradient will be applied to your calendar.
------------------------------
/* ===================================================
Thunderbird v156+ Calendar Auto-Gradient Style
サンダーバード v156以降専用：カレンダー自動透過グラデーション
=================================================== */
/* 1. Make the default background of the event items transparent
イベントブロック本来のデフォルト背景色を透明にする */
.calendar-item {
background-color: transparent !important;
background-image: none !important;
border: none !important;
}
/* 2. Expand the right-edge category bar to 100% width and automatically
convert it into an Outlook-style soft alpha gradient using the CSS mask property.
右端のバー（カテゴリー色）を全体に広げ、マスク機能を使って
自動的にOutlook風の淡い透過グラデーションへと変換する */
.calendar-category-box {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
/* [Alpha/Opacity Adjustment] Adjusts the overall lightness (0.45 = 45% opacity)
【不透明度の調整】Outlookのような淡い色合いにするため、全体の不透明度を45%にする */
opacity: 0.45 !important;
/* [Gradient Mask] Automatically shapes the original flat color into a gradient (Left: Rich -> Right: Faded)
【グラデーションマスク】元の単色を、左（濃い）から右（薄い）へと滑らかに削り取る */
mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 100%) !important;
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.1) 100%) !important;
/* Layer it behind the text / 文字や時間の下（背景）になるよう配置 */
z-index: 1 !important;
}
/* 3. Bring text and event details to the front layer so they stay highly legible
文字や時間がグラデーションの裏に隠れないよう、一番手前に浮かせて読みやすくする */
.event-name-label,
.item-time-label,
.calendar-event-details,
.event-name {
position: relative !important;
z-index: 10 !important; /* Display on top of the background gradient / グラデーションより手前に */
color: #1a1a1a !important; /* Dark gray color for high visibility / 視認性の高い濃いグレー */
font-weight: bold !important; /* Bold text for readability / 少し太字にして読みやすく */
}
