Perspective Gauge needle doesn't follow theme color

[Brian_Stilson]

I've created a gauge and I'm trying to change the needle color based on the theme. I tried setting the color to --neutral-20, but the needle stays black, no errors on the component. I tried var(--needle-20) and I get an error that it's not a valid color.

I ended up writing a script to change the color manually based on the theme, and that got it to work, but is there a better solution or is this a bug?

[Transistor]

See here:

Simple Gauge is not accepting color variables

Yes, unfortunately. Most of the chart components are based on AMCharts (but I'm not sure if that includes the Simple Gauge) and they don't understand the CSS variables. I solved the problem by creating a folder of session variables with the same names as the built-in themes and assigned the hex RGB values to those. Then you can bind the color property to the session variables. It became a bit more of a nuisance when the project had a light and dark theme and I had to create an expression bindin…

and

Change PowerChart background colour depending on session theme

The background color is set by plots.0.color, etc. Unfortunately the Perspective chart components are all third-party (mostly AM Charts) and don't know about the Perspective themes so we can't use theme variables such as --neutral-20, etc. My workaround has been to create a session custom variables for any colors I want and then create an expression binding on those. For example, if(left({this.props.theme}, 4) = 'dark', '#333333', '#dddddd' ) Then bind plots.0.color to that session prop. A…