Fade completed tasks

I'm someone who struggles with visual clutter and finds it hard to skim for the relevant information so I decided to reduce the opacity of my completed tasks to 0.2.

It means I can still see what I've completed but now I can more easily focus on and read my incomplete tasks.

All I did was created a CSS snippet with the following code:

.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] {
opacity: 0.2 !important;
}

You can adjust the opacity to your liking :)

If you've never created a CSS snippet before you can open a text editor, paste in the code and save it as "Task Opacity.css" into your hidden obsidian folder:

.obsidian/snippets

Then enable it in your settings under Appearance.

Also, for anyone curious about the buttons under the title — it's the 'Note Toolbar' plugin. I recently discovered it and think it's great so shoutout to the developer!

EDIT:

I just had another idea which was to remove the strikethrough so it's more readable when it's faded. And if I need to see a task a bit clearer, I added a subtle hover effect to increase the opacity:

.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] {
    opacity: 0.2 !important;
    text-decoration: none !important;
}


.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"]:hover {
    opacity: 0.8 !important;
    transition: ease-in-out 0.5s !important;
}

Enjoy! :)