当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Vivaldi】タスクパネルの「タスクを追加」背景を変えるCSS

カスタムCSS

Vivaldiのアイコン

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、タスクパネルの「タスクを追加」の背景を、好きな色に変える方法について書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

【Vivaldi】タスクパネルの「タスクを追加」背景を変えるCSS

本記事で紹介するCSSを使うことで、Vivaldi5.5から追加されたタスクパネルの「タスクを追加」ポップアップを好きな背景色にできます。HTMLカラーコードで指定できます。

通常は、タスクパネルの背景と同じ色です。枠線が別の色なだけで、中身は同じ色です。ここの部分を、別の背景色に変えます。色を変えることで、見やすくなるかもしれません。

Vivaldiのタスクパネルのスクリーンショット

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

「タスクを追加」ダイアログに色をつけるCSS

以下のCSSになります。「#36586a」の部分を、好みのHTMLカラーコードにします。こちらのサイトで調べられます。

/*タスクパネルの「タスクを追加」背景色*/
#tasks_panel .cal-tasks-row-events>.event-container>.calendar-event.editing {
  background-color: #36586a;
}

上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。

Vivaldiを再起動して、タスクパネルを開きます。一番下の「タスクを追加」ボタンをクリックします。指定した背景色に変わります。

Vivaldiのタスクパネルの「タスクを追加」ダイアログの背景色を赤色にした画像

自身が使っているテーマに合う色にするといいかなと思います。

Vivaldiのタスクパネルの「タスクを追加」ダイアログの背景色を灰色にした画像

テーマのハイライト色を設定することも可能です。上記CSSではなく、以下のCSSになります。「var(–colorHighlightBg);」です。

/*タスクパネルの「タスクを追加」背景色*/
#tasks_panel .cal-tasks-row-events>.event-container>.calendar-event.editing {
  background-color: var(--colorHighlightBg);
}

これで、適用しているテーマのハイライト色が自動的に適用されます。テーマを変えると、色も一緒に変わります。

「タスクを追加」の背景色を、テーマのハイライト色にした画像

テーマのハイライト色は、テーマエディター→「色」から確認できます。

Vivaldi設定:テーマ画像

「ハイライト色」が眩しい場合は、「アクセント色」を適用するといいかもしれません。下記コードです。

/*タスクパネルの「タスクを追加」背景色*/
#tasks_panel .cal-tasks-row-events>.event-container>.calendar-event.editing {
  background-color: var(--colorWindowBg);
}
「タスクを追加」の背景色を、テーマのアクセント色にした画像
【ポイント】枠線の色を変えたい場合

枠線の色は、わざわざCSSを使わなくても変えられます。

Vivaldiの設定→カレンダーを開いて、自身が使っているアカウントを選択します。右側に「カラー」項目が表示されるので、好きな色にします。

Vivaldiのカレンダー色を変更する手順画像1

色を変更したら、忘れずに「保存」をクリックします。保存しないと反映されません。

Vivaldiのカレンダー色を変更する手順画像2

感想

以上、「Vivaldi5.5（2022年10月5日公開）」から実装されたタスクパネルの「タスクを追加」ポップアップの背景を、好きな色にする方法でした。

タスクパネル関連の記事は、他にも書いているので、気になったタイトルがあれば、参考にしてみてください。

カスタムCSS