I tried changing the props.arc.color of the arc of a simple gauge component to var(--qual-2) and it just turns black. I tried other theme colors and am getting the same result.
Has anyone else had this issue?
I'm running 8.1.42 on this gateway.
edit: same results with props.arcBackground.color and props.label.color I could make a script binding to check the theme then set the color, but that's less than ideal.
If I had to guess, I'd say those are "regular" properties, different than the ones you find under style and that the style ones are converted to css while the regular ones are not.
Which means trying to use a css variable doesn't work.
As a workaround, you can try using the stylesheet.
Warning: This is a svg and navigating in there is... ugh.
This one worked for me (for the filled part), I'm not sure how reliable it is, but you can try:
#gauge-C\.0\:2 > div > svg > g > g:nth-child(2) > g:nth-child(1) > g > g > g > g > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(1) > g > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(3) {
fill: var(--qual-2);
}