# XYChart backgroundColor not changing with Theme

**URL:** <https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 22, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412 "2022-02-22T15:18:29Z")\
**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:** [February 22, 2022, 3:40pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/2 "2022-02-22T15:40:47Z")

</div>

You’re setting the wrong property. You should be setting  
`props.background.color`  
and you’ll need to set  
`props.background.render : color`.

The chart components don’t understand Ignition’s CSS themes so you can’t use the `var(--neutral-00)` syntax. As a workaround I’ve created an expression binding on the background color as follows:

```auto
if(
	left({session.props.theme}, 4) = 'dark',
	'#aaaaaa',
	'#222222'
)

```

Note that this relies on all your dark themes starting with the letters `dark`.

A better way would be:

1. Create a session custom variable `chartBackgroundColor`.
2. Bind that to `session.props.theme` using the code above.
3. Bind your charts `props.background.color` to `session.custom.chartBackgroundColor’.

Now you’ll be able to update all the charts’ backgrounds in one place. (To make it more obvious to the next guy you could create two session variables, `chartBackgroundColorDark : #aaaaaa`, etc. and reference those in the binding.

---

_[View the full topic](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412)._