Change Card Color based on Tag?

Is there a way to change the background color of a canvas card based on the tag included in its content?

You should be able to change stuff like the background of a card using cssClass in the frontmatter, in combination with some CSS magic. See links below for some starter information on how to do CSS magic in general, and more specific related to the canvas.

As holroy indicated, a cssClass would work here:

.canvas-node-container .bumblebee {
  background-color: orange; /* card background color */
}

…and add

---
cssclass: bumblebee
---

to the top of a text card or file card. You’ll have an orange background.


As you specifically asked about tags and I’ve been playing with them the past few days, I think something like this will also work. Only text and file cards with a #bumblebee tag will be styled. The styling only takes effect when you click out of the card and it shifts to reading view. It requires an Obsidian installer of 1.1.8 or later to work, and hopefully doesn’t break anything. :crossed_fingers:

.tag[href="#bumblebee"], .canvas-node-container:has(.tag[href="#bumblebee"]) {
  color: var(--color-blue); /* tag font color */
  background-color: orange; /* card background color */
  border-color: black; /* card border color */
}

Screenshot 2023-04-18 095556

2 Likes

Thank you!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.