# Change PowerChart background colour depending on session theme

**URL:** <https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 1, 2023, 3:58am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186 "2023-08-01T03:58:15Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 1, 2023, 7:30am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/2 "2023-08-01T07:30:10Z")

</div>

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,

```auto
if(left({this.props.theme}, 4) = 'dark',
	'#333333',
	'#dddddd'
)

```

Then bind `plots.0.color` to that session prop.

As you can see, the only restriction is that all my dark themes have to start with 'dark'. If you want to get fancy, create a `colorConfig` object in the session variables and create objects within that such as an array of colors for the pens. Here's a sample.

![Session chart colors](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/a/ca91dad84a7a135e18953ab2bb3752fb68d9dae7.png)

---

_[View the full topic](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186)._