【Vivaldi】パネルの背景色を偶数と奇数で違う色にするCSS
この記事では、Vivaldi のオリジナルカスタムUI機能を使って、パネル（サイドバー）のリストアイテムの背景色を、偶数と奇数で違う色にするCSSについて書きます。
Vivaldiのパネル（サイドバー）にあるリストアイテムの背景色を、偶数と奇数で違う色にするCSSです。
例えば、偶数行は赤色、気数行は青色といった風にできます。色は好きな色を指定できます。テーマで指定したアクセントやハイライトに合わせることも可能です。
カラーコードで細かく指定できるので、類似色にすることもできます。
「色を交互に変えたほうが、視認性・可読性が向上する」と思う方におすすめです。
Vivaldiのパネルについては、下記記事を参考にしてみてください。
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。
自分で書いたCSSでブラウザの外観を好きなようにカスタマイズできる機能です。デフォルトではオンになっていないので、設定でオンにする必要があります。
CSSと呼ばれるプログラミング言語をある程度理解している必要がありますが、使いこなせれば、自由にブラウザを好みの外観に変更できます。
有効にしていないという方は、以下の記事を参考にしてみてください。
いくつかテーマ関連のCSS コードのサンプルを、以下の記事に書いています。
気になった方は、合わせて参考にしてみてください。色々な部分の背景色を透明化したりできます。
CSS
CSSは以下になっています。
/*パネルのリストの背景色変更（偶数行）*/
#panels .tree-item:nth-child(2n) {
background-color: red; /*ここを好きな色に変更する*/
}
/*パネルのリストの背景色変更（奇数行）*/
#panels .tree-item:nth-child(2n+1) {
background-color: blue; /*ここを好きな色に変更する*/
}「red」や「blue」の部分を、ご自身で設定したい背景色にしてください。主要な色は英語で直接指定できますが、基本的にはHTMLカラーコードの方がおすすめです。
「#006400」とか「#ff0000」といったやつです。以下のサイトで、簡単に調べることができます。
https://www.colordic.org/上記のCSSを、エディタ（Visual Studio Codeやメモ帳など）でファイルに書き込みます。以下の感じです。
書き込めたらブラウザを再起動させます。無事にパネル（F4）を開いた時のリストアイテムの背景色が、偶数と奇数で異なる色になっているかと思います。
ブックマークパネルだけでなく、履歴、メモ、メールなどにも反映されます。
HTMLカラーコードで指定した場合は、より自由に色を指定できます。同じ緑っぽい色…といったように近い色を指定できます。
テーマの色に合わせる
Vivaldiのテーマで設定した背景、前景、ハイライト、アクセントに合わせることも可能です。
以下のコードを参考にしてみてください。自分が使いたいコードをそのまま「background-color: red; /ここを好きな色に変更する/」の部分と差し替えます。
/*背景*/
background-color: var(--colorBg);
/*前景*/
background-color: var(--colorFgIntense);
/*ハイライト*/
background-color: var(--colorHighlightBg);
/*アクセント*/
background-color: var(--colorAccentBg);
テーマの色とは、Vivaldiの設定→テーマ→エディターで設定した色のことです。
「上記コードを使うことで、設定したテーマの色を、自動的にリストアイテムの背景にも適応できるよーん」ってわけです。
例えば、背景とアクセントを適用したい場合のCSSは、以下のようになります。
/*パネルのリストの背景色変更（偶数行）*/
#panels .tree-item:nth-child(2n) {
background-color: var(--colorAccentBg); /*アクセント*/
}
/*パネルのリストの背景色変更（奇数行）*/
#panels .tree-item:nth-child(2n+1) {
background-color: var(--colorBg); /*背景*/
}
これで、カラーコードで指定しなくても、自動的にテーマで設定した色が反映されます。
こちらの方が、テーマの色に合うのでいいかもしれません。好みですね。
文字色も交互で変更する
文字色も、偶数と奇数で変更できます。
偶数と奇数の部分に、それぞれ「color」を指定するだけです。色は自分の好きなように変更します。
/*パネルのリストの背景色変更（偶数行）*/
#panels .tree-item:nth-child(2n) {
background-color: var(--colorAccentBg); /*アクセント*/
color:red; /*文字色変更*/
}
/*パネルのリストの背景色変更（奇数行）*/
#panels .tree-item:nth-child(2n+1) {
background-color: var(--colorBg); /*背景*/
color: blue; /*文字色変更*/
}
まとめ
以上、Vivaldiのパネルの背景色を、偶数と奇数で変えるCSSについてでした。