Programmatically control CSS for completed tasks?

Custom CSS & Theme Design
1

I’m taking a stab at my first plugin, toggling the display of completed tasks, and I’d like to programmatically toggle a css property (.markdown-preview-view li.task-list-item.is-checked adding display: none).

I see that this.app has a customCss property, so my hope is there’s a way to add or remove rules there, but I didn’t see this in the developer docs.

Has anyone given this a try?

2

For CSS I think you can just provide a styles.css file.

You can search for styles.css here, might give you a better idea: https://github.com/obsidianmd/obsidian-sample-plugin

1 Like
3

Yep, I cloned the repo and added the custom css – works perfectly. The feature I’d like to add is a UI element that allows the user to toggle display on and off.

4

If you want a global toggle, have the command do something like document.body.toggleClass("hide-completed-tasks") and have your CSS rule key off of body.hide-completed-tasks .markdown-preview-view li.task-list-item.is-checked.

If you want a per-pane toggle, have the command call toggleClass() on the .containerEl of the .activeLeaf of this.app.workspace, and use div.hide-completed-tasks in place of body.hide-completed-tasks in the CSS.

2 Likes
5

Thanks @pjeby – this is exactly what I was looking for. I’ll start with one and probably add both if there’s any interest.

6

Closing the loop: I’ve made a first pass at the plugin and submitted the PR for inclusion.

3 Likes