Add transparency to built in theme color

Hi all!

Is it possible within an expression to add transparency to a built in theme color?

For example, I'd like to take '--qual-1' which is bound to a backgroundColor prop, and within an expression, retrieve the HEX and add 'AA' to the end for transparency adjust.

...Trying to avoid hardcoding where possible

Thanks! :slight_smile:

This thread might be of some help:

Doesn't seem like there is an easy way to do it...

When you supply a theme color to a property, you're supplying a string name, and handing off handling of conversion to the browser in use, where the string name will eventually match a variable name and be converted into a hex value.

But in the Designer, any binding will only see the string value - there is no direct check ever made against the CSS files by Ignition because they're "downstream" of Ignition itself.

Oddly enough, there's no way to directly add alpha to a variable in CSS, but you can get the desired behavior by modify the opacity property of the component in question.

1 Like