Obsidianのcheckboxをカスタマイズする
Obsidianのチェックボックスは、通常中にxの文字を入れてdone扱いにするが、Minimalのテーマなどではx以外の文字を入力することで表示されるアイコンを変更することができる。
エディタのソースを覗いてみるとinputが以下のようになっている。
data-task にチェックボックスの中に入力された文字が設定されているので、それを使ってCSSを切り分けることで上記のような機能が実現されている。MinimalからCSSを拝借するとこんな感じ。
style.cssinput[data-task="-"]:checked, li[data-task="-"]>input:checked, li[data-task="-"]>p>input:checked {
color: var(--text-faint);
--checkbox-marker-color: transparent;
border: none;
border-radius: 0;
background-image: none;
background-color: currentColor;
-webkit-mask-size: var(--checkbox-icon);
-webkit-mask-position: 50% 50%;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
body:not(.tasks) .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:is([data-task="-"]){
color: var(--text-faint);
text-decoration: line-through solid var(--text-faint) 1px;
}以下のように - を入れた部分が違った表示になっている。
