Using CSS Variables in Color Selector? (for easier 'Dark Mode' builds)

[lukefinsaas]

I’m building a little dark mode / monochrome mode toggle for a client site and discovered that Pro outputs the Theme Option -> Colors as raw HEX (or RGB or whatever you select). Bummer! I thought I’d be able to simply update the Pro variables, rather than have JS hunt through the stylesheets.

BUT THEN I thought: maybe Pro will consume whatever I give it.

Turns out, it does.

Do you foresee any issues with using something like var(–yellow) for the brand yellow?

[tristup]

Hi @lukefinsaas,

Thanks for reaching out.
It is not very clear what problem you are facing with the CSS variables. I have checked it in the local environment with the latest version of the theme, and it is working fine.

Thanks

[lukefinsaas]

Nothing wrong. I wanted to validate that it is acceptable to pass CSS variables as colors. I’m assuming that it’s good — but wanted to make sure there weren’t downstream issues as we get deeper into this project.

Thanks, as always, for a great tool!

[tristup]

Hi @lukefinsaas,

Thanks for the appreciation.