Task text color based on tag

[Jovial_valley]

What I’m trying to do

I’d love to be able to color the text of a task shown with dataview, based on a tag. For instance, I would have the task :

• Buy eggs #groceries #2aa34b

I want the text “Buy eggs” in the color of the tag that represents the hex color.
I don’t expect dataview to “read” the tag color, I would set it up in advance (for instance, in a css snippets). Having the tag with the hex color code just helps to avoid having two tags associated with colors for the same entry.

Things I have tried

I found a snippet to color the actual tag text in this thread.
The main reason I would like this to work is to use it with the task calendar made by 702573N. There is an option to change the box/text color from the color property of a page, but I sometimes have different tasks topic on one page.

Thank you for your help!

[wealthychef]

the first thing that occurs to me is to use CSS selectors. You could theoretically find the selector for the tag itself, then use a selector for its task parent, then get the text for the task. Unfortunately, There is currently no way to select the parent of an element in CSS in a way that works across all browsers. Maybe wiser heads can answer about that…

[holroy]

Are you expecting the solution to accomodate whatever hex code there is, or would you be satisfied with just a few colors?

[blue_emperor]

Why do you want to explicitly specify color in each task and not based on groceries tag for example? I mean more useful would be to create - [ ] buy eggs #groceries and then this task would take the color based on the #groceries. The essence of this approach is to avoid overloaded use of colors and instead dedicate few chosen tags to have pre-defined colors. You also get consistency because now the tag comes with some color.

[Jovial_valley]

I would be satisfied with a few colors. The hex code would only be to make sure I don’t have several tags with colors.

[Jovial_valley]

To avoid several tags with associated colors. That way, even if a task has #groceries AND #vegetables (just an example here), I can make sure there is only one color. I would still pre-define the color code tag, and the tasks would only have one color tag to avoid an overloaded use of colors.

[blue_emperor]

If you pre-define your color tag then why don’t you give it more descriptive name like #personal? I like the idea of having consistent task coloring, but it could be achieved by tag ordering: first tag gives the color for example.

[Jovial_valley]

I’d be ok with that, but I still don’t know how to apply the color to the task’s text and not just the tag.

[holroy]

So finally I got around to providing you with some more information. Try adding the following in a CSS snippet:

.HyperMD-task-line:has(.cm-tag-c45),    
.task-list-item:has(.tag-c45) {
  color: #c45 ;
}

.HyperMD-task-line:has(.cm-tag-45ef23),
.task-list-item:has(.tag-45ef23) {
  background-color: #45ef23 ;
}

.HyperMD-task-line:has(.cm-tag-red),           
.tasks-list-text:has(.tag-red) {
  background-color: var(--color-red) ;
}

And with the following example text:

- [ ] My beautiful #c45 task
- [ ] Another using #45ef23
- [ ] Repeating #c45 
- [ ] Final one using #red

This gives three different styles:

• #c45: Colors just the text to that color, in both live preview and reading
• #45ef23: Sets the entire task lines background color in both modes
• #red: Sets just the text background to that color (doesn’t work in live preview)

In reading mode this displays as the following for me:

All rules depend on targeting a higher level element, and then using :has(...) to check if there is a tag with a given name further down in the DOM elements, and then setting the color appropriately. Note that you need one set the .Hyper* for live preview, and another set the .task* for reading.

Finally, in the last rule I use var(--color-red), this will check the current theme’s definition of its red color. This means that you, theoretically at least, should be able to reuse a similar color form the theme, and if you change color scheme this variable should follow suit and keep your overall color scheme intact.

Bonus tip: How to add a custom CSS snippet

• Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
• In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
• Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
• Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
• If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.

[blue_emperor]

Nice task customization! Since you seem to be very skillful at this, I’d like to ask if you know how to modify task dates to display today, tomorrow, yesterday etc. with some color scheme. There could be different color schemes for starting, scheduled and due dates.

[holroy]

I think we, as this forum, has already done that. In any case, that belongs in a thread of its own. We should keep each thread to one topic.

[blue_emperor]

Yes sorry. I was just wondering if you knew the thread in question.

[Jovial_valley]

That’s amazing, thank you so much!!
With this, I was also able to modify it a bit and use it with my tasks snippets to use with Dataview.

.task-list-item:has(a.tag[data-tag-name="#c45"]) {
  color: #c45 ;
}

I’m also trying to make in work in the calendar view of the Task Calendar with this added to their “view.css” file :

.tasksCalendar .task:has(.tag-c45) {
  color: #c45 ;
}

But this doesn’t seem to work. I tried your versions as well. I will still mark this thread as solved, but if anyone sees this and wants to give a try (might need some tweaking in the .js file?), go ahead :).

[holroy]

First of all, it’s not good practice to change the view.css of a theme directly, as your changes will be reverted the next you update that theme. A much better solution is to have that code in a CSS snippet of its own. You just need the stuff you’ve changed in that file.

Regarding the calendar thingy, you might need to increase the specificity of the CSS selector by adding some more classes or outer html elements. Most likely the calendar has some setting for the background which is more specific than your code. It could possibly also be you need to target another element to set the background. Using the Elements pane in Developers Tool should reveal which element which actually holds the background color.