背景
さて、問題です。
下図はVivaldiで開いたWebページの様子です。
左側にはタブがたくさん開いていますが、現在アクティブのタブはどれでしょう。
3秒でお答えください、はい、3 2 1 …
関西弁LPも用意されてるVivaldiの愛らしさに惚れ、かれこれ5年以上の付き合いです。
長い付き合いなので常時100タブ以上（今数えた）開いてまして。問題にした画像は12タブですから単純計算で毎回8倍以上辛いのを強いられてるわけです。
なんせタブごとのプレビューや階層構造、メモリセーバーも標準サポートですから、「タブをたくさん開くのが悪い」じゃなくて「タブをたくさん開くためのブラウザ」なんですよ。
そう、あっという間にアクティブなタブを見失うんだ…
名誉のために言うと、VivaldiはQuick Commandでタブもテキスト検索できます。
ただ、タブをD&Dして動かしたりスタックしたり、アクティブなタブが属するスタックの他のタブはどうなってたっけ？てやりたい場面も少なからずあります。
つまり、視覚的にタブを見つけやすくしたいのです。
結論: Custom UI CSS
公式の『Vivaldiを自分に合わせてカスタマイズする12の方法』とか、Theme Editorとかページアクションあたりも調べたけど、良い感じにアクティブタブの見た目を弄る方法が見つからず。
『カスタムCSSで不要な物は非表示に、必要な物はクイックコマンドで呼び出す！UIデザイナーならではの #Vivaldiを使うワケ』で、「そんな隠し機能あったんかい！」と驚く。
手順
はじめに、アドレス直打ちで vivaldi://experiments と入力して表示される試験的機能一覧から"Allow CSS modifications"をONにする。
次に、設定の"Appearance"にある"CUSTOM UI MODIFICATIONS"で、読み込むCSSが置いてある場所を指定。
このディレクトリにあるすべてのCSSを読み込むっぽい。
他のデバイスでも共有したいので、自分はiCloud Documentsにディレクトリを用意した。
用意したCSSファイルの中身はこれだけ。
.tab.active {
border: 3px solid #bf5640;
}
#bf5640はVivaldiロゴから色を拾った、とりあえず適当に色つけたかったので。
そして、再起動。
冒頭の画像が、こうなりました。
CSS Animationとか使ったらもっと目立たせることもできそうだけど、本来の目的は果たしたので深追いしてない。
要望
実際にやったから尚更思うけど、これぐらいは標準のTheme Editorでやらせて欲しいです。
（「開いてるWebページからアクセントカラーを取得して背景色にする」ができてるんだから、絶対できるでしょ）
フォーラムでも同様のリクエストも上がってますし。
