Style tasks by completion character

Share & showcase
1

Problem: I wanted to format canceled tasks differently than regular completed tasks. I’m defining a “canceled” task as one where there is a dash in the brackets instead of an x. I would like canceled tasks to have a grey checkmark, and have grey (but not strikethrough) text.

Example:

image

Solution: To accomplish this, I took advantage of the fact that Obsidian records which character was used to check a task in the data-task attribute of the <li> item:

image

So this CSS does the trick:

/* ==================================================================== */
/* CHECKLISTS                                                           */
/* ==================================================================== */

/* Special handling for canceled tasks, e.g.
 * - [x] This is done
 * - [-] This was canceled
 * - [ ] Needs doing
 */

/* Make canceled item text gray but not struck out. */
ul > li.task-list-item[data-task="-"] {
    color: var(--text-faint);
}

/* Make canceled checkbox light gray */
ul > li.task-list-item[data-task="-"] > input {
    filter: grayscale(100%) opacity(25%);
}
3 Likes
2

Another option is to use the Obsidian Snippetor plugin:

1 Like
3

I just did this yesterday, with the default theme.

I poked around in the Web Inspector and noticed that it does the regular checkboxes with SVGs in CSS masks, so you can “just” swap out that mask, and optionally also change colours:

Screenshot

Custom CSS (via Appearance > CSS snippets):

li.task-list-item[data-task=">"], li.task-list-item[data-task="-"] {
  color: var(--checklist-done-color)
}

li.task-list-item[data-task=">"] .task-list-item-checkbox {
  --color: #33cede;
  background-color: var(--color);
  border-color: var(--color);
}

li.task-list-item[data-task=">"] .task-list-item-checkbox::after {
  /* https://lucide.dev/icons/chevron-right, stroke-width modified */
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
  -webkit-mask-size: 12px;
}

li.task-list-item[data-task="-"] .task-list-item-checkbox {
  --color: #999;
  background-color: var(--color);
  border-color: var(--color);
}

li.task-list-item[data-task="-"] .task-list-item-checkbox::after {
  /* https://lucide.dev/icons/slash, stroke-width modified */
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-slash"><path d="M22 2 2 22"/></svg>');
}
2 Likes