Changing tag color in post cards based on tag accent color

Developer help
1

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!

2

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>
{{/foreach}}

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

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

That works thank you!

1 Like