Obsidian俺色に染まれ計画

Obsidian俺色に染まれ計画

アウトライナーにもなる高機能ノートアプリのObsidianですが、ショートカットキーでラベルを貼れるようにしたり、アウトライナーとして見やすいように行間を広げるカスタマイズができたので、機能的には完成と言っていいところまでになりました。

せっかくなので同時に色のカスタマイズも行いましたが、昨日の時点で3箇所変更できていなかったので、今日から「Obsidian俺色に染まれ計画」を発動しました。

開発者モードでのCSS解析と、適当にCSSを当てた結果、3箇所中2箇所を俺色に染めることに成功しました。

1箇所は、設定のドロップダウンリストの▼です。

CSSを見ると、SVG画像をコードに変換したものでした。文字コードがASCIIなので長くて見にくいですが、下のコードで赤マーカーの太字部分がWebカラーコードの6桁なので、ここを好きな色に変更してCSSスニペットのファイルに追記すればOKです。

.dropdown{
background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2371AD2B%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
}

2箇所目は、左サイドバーの境界線のホバー色です。

これはホバーする元のクラスを見つけたけどhoverの記述がなく、下のコードを書き加えたらうまくいきました。

.workspace-leaf-resize-handle:hover{
 background-color: #71AD2B;
}

もう1箇所、設定のドロップダウンリストのホバー背景色がわかりませんでしたが、最初の画像の青い部分です。テーマの変数も全部弄ってみましたが反映されず、他にも書いてあるところが見つけられなかったので、CSSでは設定せずJavaScriptで制御を行っているかもしれません。

あと1箇所、たった1箇所が俺色に染まらなかったッ…！！

これだけに関わっているわけにはいかないので、合間合間で色々調べたり試したりしましたが、今日は方法を見つけられませんでした。これがうまくいったらObsidianカスタマイズのまとめ記事を書こうと思っていたので、非常に悔しいですね。

それでも該当箇所を見つけてうまくいったときの達成感が脳汁出まくりなので、これからもコツコツとトライ＆エラーでやっていって、何とか方法を見つけようと思っています。

すでに機能的には必要かつ十分な状態になっていて、色は別にカスタマイズしなくても全く問題がないわけですが、やり始めたら最後までやり遂げたいのが人情というものなので、これだけはやってしまってスッキリしたいです。希望としては来週中までに方法を見つけられたらと考えています。