Changing tag color in post cards based on tag accent color

Hello, I’m trying to change the color of tags in the post cards based on the color set for each tag. According to this article there’s a tag property called accent_color but I don’t know how to refer to that property in CSS? Can anyone help? Thanks!

You can’t refer to it from css, but you could do something like this in hbs:

{{#foreach tags limit="3"}}
   <a class="post-card-tag tag-{{slug}}" href="{{url}}" {{#if accent_color}} style="--color-accent: {{accent_color}}"{{/if}}>{{name}}</a>

You have the --color-accent CSS custom property which can be used in CSS.

.post-card-tag {
  background-color: var(--color-accent);
1 Like

That works thank you!

1 Like