Obsidianのcheckboxをカスタマイズする

Obsidianのチェックボックスは、通常中にxの文字を入れてdone扱いにするが、Minimalのテーマなどではx以外の文字を入力することで表示されるアイコンを変更することができる。

Obsidian Minimalには12種類のボックスがある - Jazzと読書の日々

Checklists - Minimal Documentation

エディタのソースを覗いてみるとinputが以下のようになっている。

https://gyazo.com/08337eb3ae8115b85d45c25b0f4d09bc

data-taskにチェックボックスの中に入力された文字が設定されているので、それを使ってCSSを切り分けることで上記のような機能が実現されている。

MinimalからCSSを拝借するとこんな感じ。

code:style.css

inputdata-task="-":checked, lidata-task="-">input:checked, lidata-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-linedata-task:is(data-task="-"){

color: var(--text-faint);

text-decoration: line-through solid var(--text-faint) 1px;

}

以下のように - を入れた部分が違った表示になっている。

https://gyazo.com/00a331b035a737566bb53fe19ee5479c