My Tasks theme

[esm7]

As the one who added the latest themeing features to Tasks, it should come as no surprise that my setup is close to the examples in the documentation. However, I thought it might be worth to show the complete set of CSS rules I've been using in the past months (during which I kept improving the theming options for Tasks).
A main difference from the examples is the usage of some custom colors (rather than theme variable names) to make them more "material".

This is the full CSS:

/* I like tags to appear in gray so they won't grab too much attention */
.tasks-list-text a.tag {
    color: gray;
}

/* Set internal links to gray too instead of Obsidian's default */
.tasks-backlink a.internal-link {
    color: gray;
}

/* Paint the recurrence rule in gray so it will be less distracting */
.task-recurring {
        color: gray;
}

/* List indentation values that seem to work well for me */
ul.contains-task-list.plugin-tasks-query-result {
    padding: 0 10px;
}

/* This seems to be needed for the task description to word-wrap correctly if they're too long */
span.tasks-list-text {
        width: auto;
}

/* Represent tasks' priority with colorful round checkboxes instead of the priority emoticons */
.task-list-item[data-task-priority="high"] input[type=checkbox] {
        box-shadow: 0px 0px 2px 2px var(--color-red);
        border-color: var(--color-red);
}
.task-list-item[data-task-priority="low"] input[type=checkbox] {
        box-shadow: 0px 0px 2px 2px var(--color-blue);
        border-color: var(--color-blue);
}
.task-list-item[data-task-priority="medium"] input[type=checkbox] {
        box-shadow: 0px 0px 2px 2px var(--color-orange);
        border-color: orange;
}
/* This part removes the regular priority emoticon */
span.task-priority {
        display: none;
}

/* A special color (bluish) for the 'due' component if it's for today */
.task-due[data-task-due="today"] span {
        background: #d2e8fa;
        border-radius: 10px;
        padding: 2px 8px;
}
/* A special color (reddish) for overdue due dates */
.task-list-item[data-task=""] .task-due[data-task-due^="past-"] span {
        background: #ffbfcc;
        border-radius: 10px;
        padding: 2px 8px;
}

/* Make checkboxes a circle instead of a square */
ul > li.plugin-tasks-list-item .task-list-item-checkbox {
     margin-inline-start: 0;
         margin: 5px 2px;
         border-radius: 50%;
}

/* The following section organizes the task components in a grid, so the description will be on the first row
 * of each item and most components will be in the 2nd row. */
ul > li.plugin-tasks-list-item {
    grid-template-columns: 25px auto;
    display: grid;
    align-items: top;
}
span.task-description {
    grid-row: 1;
        grid-column: 1/10;
}
span.tasks-backlink {
    grid-row: 2;
    grid-column: 2;
        font-size: small;
}
span.task-recurring {
    grid-row: 2;
        font-size: small;
        width: max-content;
}
span.task-due {
    grid-row: 2;
        font-size: small;
        width: max-content;
}
span.task-done {
    grid-row: 2;
        font-size: small;
        width: max-content;
}
.tasks-list-text {
    position: relative;
    display: inline-grid;
        width: max-content;
        grid-column-gap: 10px;
}
span.task-extras {
    grid-row: 2;
    grid-column: 2;
        font-size: small;
}
li.task-list-item ul.has-list-bullet {
        grid-row: 3;
        grid-column: 1/10;
}

.task-description span:has(.tag[data-tag-name="#t/strategic"]) {
        background: #fce3e8;
        border-radius: 10px;
        padding: 2px 8px;
}

/* Tag colors */
a.tag[data-tag-name="#t/incall"] {
    box-shadow: 0 0 5px green;
        margin: 2px;
}
a.tag[data-tag-name="#t/evening"] {
    box-shadow: 0 0 5px cornflowerblue;
        margin: 2px;
}

[claremacrae]

Thank you for sharing that. I do really like the colours you are using.

[Grant837]

@esm7 Is it correct that themes only work on lists from Task Queries? At least for me, that is how it works. The actual tasks entries remain un-affected.

[claremacrae]

Approximately, yes...

I just checked... from https://publish.obsidian.md/tasks/Advanced/Styling (my emphasis added)

In rendered queries and Reading View, the Tasks plugin adds detailed CSS classes and data attributes that represent many of each task's content, to allow for very extensive styling options via CSS.

In other words, the Tasks CSS styles/themes are shown in:

• Tasks Query results - which are shown in Reading and Live Preview views
• Your original task list - when viewed in Reading mode.

[Grant837]

Ah! I had looked through the documentation, but have to admit that the first part of Styling chapter did not look like it would address ´themeability´ so I did not browse down far enough! My bad.

[esm7]

@Grant837 the editor (either in Source or Live Preview mode) always shows just text.
Like @claremacrae wrote above, theming is relevant for task list renders, which are queries or Reading Mode.

[Grant837]

Thanks to you both! I have to admit I rarely use the reading mode, so did not think of seeing how they rendered there.

[reagle]

Where do I place this CSS file for it to be active?

[claremacrae]

In the snippets folder in your vault.
This page in the Obsidian docs should help:
https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets

[crmfyi]

I appreciate this CSS and how it helps make my tasks easier to distinguish. Due to accessibility reasons, I use a larger font in Obsidian to be able to better read my vault. I've noticed that increasing the font size in Obsidian settings seems to mash the circle and the task together. I tried experimenting with the CSS to see if I could add some additional padding to it, but I didn't seem to be able to find the right combination. Would @esm7 or @claremacrae happen to know a way I can add some margin between the circle and the task? Your help would be greatly appreciated.

[kmaustral]

I've been enjoying this but the new Obsidian 1.5 seems to misalign the elements using this style.

[esm7]

I'm still struggling with some Obsidian 1.5 changes so I'm not sure if this is the best fix, but what worked for me is to add !important in the margin-inline-start setting here:

/* Make checkboxes a circle instead of a square */
ul > li.plugin-tasks-list-item .task-list-item-checkbox {
     margin-inline-start: 0 !important; 
	 margin: 5px 2px;
	 border-radius: 50%;
}

[lup3v0]

Hello - thank you for showing the community how to customize the look of tasks. I was curious how I could add css to style the auto-suggest emojis? Is this possible?

Thank you!

[esm7]

That's an Obsidian suggestion modal that Tasks utilizes. It's a little tricky to inspect with the Development Console how it's built, because it closes once you focus away from it, so a trick I like to use in such cases is to enter on the console - setTimeout(() => {debugger;}, 10000), then you have 10 seconds to open a popup, the app will freeze into debug mode, and you'll be able to inspect it.
Long story short, that's how the Obsidian suggestion modal looks like:

You can utilize these classes to add corresponding CSS rules.

[lup3v0]

I am new to Obsidian and didn't even realize there was a development console available!
Thank you so much for this insight and the tip about the timeout, too, that's a clever workaround!