[Resolved] Change a color on the post based on category selected

When I create the template, I have to choose a color for, say, a button. I’d like that color to be dynamically selected based on the Licensee Category, but in the GB settings I can only choose 1 global color for the button color.

Correct. In the template you can only define a single global color.
Theres no changing that – and neither would you want or need to 🙂

We just need a mechanism that changes the global colors value based on what Category term the post type is.

A simple solution is to add a CSS Class to the body tag that matches the current post taxonomy term.
We can then use that Class to write in our new color variables.

1. Add this PHP Snippet to add your CPTs custom taxonomy term to the body.
Make sure the is_singular is correct and the your_custom_tax_slug matches your taxonomy.

function db_cpt_term_body_class( $classes ) {
    // Set logic for post type - make sure the provider is the correct slug
    if ( is_singular('licensee') ) {
        global $post;
        $cpt_terms = get_the_terms( $post->ID, 'your_custom_tax_slug' );
        //Change 'your_custom_tax_slug' to your Custom Taxonomy slug.
        if ( $cpt_terms && ! is_wp_error( $cpt_terms ) ) {
            foreach ( $cpt_terms as $term ) {
                $classes[] = $term->slug;
            }
        }
        return $classes;
    }
}
add_filter( 'body_class', 'db_cpt_term_body_class' );

Now in our body tag on the single post we should see ( by inspecting the front end HTML ) our tax term. eg. provider or app

2. Now in your Global colors.
Creata a generic global color eg.

--licensee-accent: #ff0000;

This will be the color you set in the Content Template and can be the fallback color.

Then add colors for the different terms:

--provider-accent: #00ff00;
--app-accent: #0000ff;
--another-term-accent: #0f0f0f;

3. Now it just requires some CSS, that uses our new body class selector to change the color:

body.provider {
     --licensee-accent: var(--provider-accent);
}
body.app {
     --licensee-accent: var(--app-accent);
}
body.another-term-accent {
     --licensee-accent: var(--another-term-accent);
}

This method means you just need to add a new color ( in step 2 ) and write the CSS Rule ( in step 3 ) each time you add a new term.

If in the future you want to switch up the colors for one of those terms, you just need to change its color in the Customizer > Global Colors.

Glad to be of help. And for my own sanity and OCD i corrected the CSS above 🙂

I want to add the same class to the term archive page for that taxonomy.

If it’s a term archive, it has the class already.

Is it possible to see the archive ?