Perspective Css-Theme-Variable not working on all Controls

Ignition
1

Hi,

im trying to set the color of a Gauge control with a theme variable but it seems it s not working.

-> Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation

Im using Ignition 8.1.20

Any hints to make it work, or its by design, or im completly wrong :slight_smile:

Thanks in advance.

br,
Roland
image
image

2

This is a problem with the chart components in general. They are bought in or adapted from AM Charts, for example, and may have SVG components that don't reference the CSS.

We allow users to select a theme on all our projects - usually just the built-in themes. My workaround for the charts has been to set up a session.custom.config section and add the necessary colors there that mimic the CSS theme colors.

Session custom theme

I used the ColorZilla plugin for Google Chrome to read/pick the colors from the Ignition manual page and pasted them into the bindings as follows:

if(left({this.props.theme}, 4) = 'dark', '#fafafa', '#222222')

Now all you have to do is make sure that any dark themes start with 'dark' and it should work. Obviously you can add in as many other theme items as required.

Your chart components now use property bindings to these variables instead of the --theme-color syntax. It's a bit of a hack but it gives you a decent chance of consistent color through a project.

1 Like