Perspective Css-Theme-Variable not working on all Controls

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.

3 Likes