Setting Dynamic Site Color

sage
1

Hello!

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!

Travis

2

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.

3

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);

@php
$site_color = get_theme_mod('primary_color');
@endphp
<style>
    :root {
        --site-primary: {{ $site_color }};
    }
</style>
4

Custom properties are very cool, but be aware that they have no support under Internet Explorer. There does appear to be a polyfill available: https://github.com/jhildenbiddle/css-vars-ponyfill I haven’t tested it, though.

2 Likes
5

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

6

And have a look at kirki.org as well as to the development of version 4.0 at github.com/kirki-framework

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.

7

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