Canvas: Change Card color depending on Property values

[paul436435634]

What I’m trying to do

I have a Canvas where i display several Cards. They all have different property values. I want Canvas to change background color of the Cards depending on specifiv property values.

Things I have tried

Thanks to the forum, I managed to do this with nested tags tags like so:

.tag[href="#Status/example1"], .canvas-node-container:has(.tag[href="#Status/example1"]) {
  background-color: #FF0000; 
}
.tag[href="#Status/example2"], .canvas-node-container:has(.tag[href="#Status/example2"]) {
  background-color: #D6AD5C; 
}

Can you help me to accomplish the same with property values instead of nested tags?

[holroy]

@paul436435634

Can you help me to accomplish the same with property values instead of nested tags?

The reason why we’re able to target the tags is that the tag value is included within the html tag attributes. If we look at an example property of propKey: propValue in the Developers Tool > Element we see the following:

<div class="metadata-property" tabindex="0" data-property-key="propKey" data-property-type="text">
  <div class="metadata-property-key">...
  <input class="metadata-property-key-input" type="text" aria-label="propKey"></div>
  <div class="metadata-property-value"><div class="metadata-input-longtext mod-truncate" placeholder="Empty" contenteditable="true" tabindex="0">propValue</div>
  <div class="metadata-link" style="display: none;"><div class="metadata-link-inner">propValue</div>
</div>

This is somewhat simplified but the key thing to notice is that we don’t see the propValue within the attributes of any elements. We do however see the aria-label of the metadata-property-key-input holding the value of propKey. This is in other words targetable.

To target that property element within a note one could use:

.metadata-property[data-property-key="propKey"] input {
    background-color: var(--color-orange);
}

---

Sadly, when a note is included in a canvas these property elements are not shown within the canvas element being displayed… The corresponding block to this property example is:

<pre class="frontmatter language-yaml" style="display: none;" tabindex="0">
  <code class="language-yaml is-loaded">
    <span class="token key atrule">Tags</span><span class="token punctuation">:</span> f76525
    <span class="token key atrule">propKey</span><span class="token punctuation">:</span> propValue
  </code>
  <button class="copy-code-button">Copy</button>
</pre>

And that is a not-targetable property definition when this note is presented in the canvas. Furthermore my example happened to have both a tag and an inline field also present, and the only thing begin shown which was targetable was the tag.

tl;dr So for now I think your best (and possibly only option) is to use a tag like described before.

[paul436435634]

wow, thank you for the explanation!
well, i guess i will use tags then…