How would I make the accent color change depending on a post's primary tag?

Themes
1

I’m working with the Edition theme, but I think this should apply to others as well.

I’m able to change the site accent color (which colors the text of links, etc.) in the post.hbs file to a color given the hex code. I’d like to be able to set it to different colors depending on what the primary tag of the post is, but I don’t know how to word the if statement to do so.

2

You could do something like this on the article element in the content.hbs file:

<article class="single {{post_class}}" style="--ghost-accent-color: {{primary_tag.accent_color}}">

This will redefine the accent color to be the primary tag’s accent color for everything in the post.

3

That worked, but is there any way to check if the primary tag has an accent color, and, if not, to revert back to the default. Most of my primary tags will have an accent color set, but when they don’t the color comes out a dark gray that’s hard to read against some black backgrounds.

4

Yep! You can surround the whole block in an if helper. That way, the style tag will only render if an accent color exists:

{{#if primary_tag.accent_color}}style="--ghost-accent-color: {{primary_tag.accent_color}}"{{/if}}

If there isn’t an accent color, then the color will fallback to your default accent color defined in Design settings.