Setting Dynamic Site Color


Has anybody had a need to set a dynamic site color variable? If so, how was that accomplished? I have created a color picker in the customizer to select the site color and then I’ve passed it into the css files through a .env file, which works decent, but we have a network of websites each with a different color that we deploy to and I’m trying to figure out a way that doesn’t require a new yarn build for each site while deploying.

Any suggestions are appreciated!


I’ve done it semi-similar to what you mentioned in the distant past. I haven’t needed to in awhile, but I’d just use a CSS variable in :root and inline it or something.

Yes, I actually tried that shortly after creating this post and it seems to be working. For those trying to accomplish something similar, I’ve set the site color in the head using :root and then I’m pulling that color into my sass files using the color variable: var(–site-primary);

$site_color = get_theme_mod('primary_color');
    :root {
        --site-primary: {{ $site_color }};

Custom properties are very cool, but be aware that they have no support under Internet Explorer. There does appear to be a polyfill available: I haven’t tested it, though.


I tested that polyfill and it appears to be working, thanks for the recommendation.

And have a look at as well as to the development of version 4.0 at

I am supporting the development since a couple of months via PR, as it really makes a lot easier with the customiser. And the CSS module is very powerful, too.

This topic was automatically closed after 42 days. New replies are no longer allowed.