# Cannot change arc color of Simple Gauge to theme colors

**URL:** <https://forum.inductiveautomation.com/t/cannot-change-arc-color-of-simple-gauge-to-theme-colors/95088>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 23, 2024, 4:19pm UTC](https://forum.inductiveautomation.com/t/cannot-change-arc-color-of-simple-gauge-to-theme-colors/95088 "2024-08-23T16:19:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [August 23, 2024, 4:19pm UTC](https://forum.inductiveautomation.com/t/cannot-change-arc-color-of-simple-gauge-to-theme-colors/95088/1 "2024-08-23T16:19:35Z")

</div>

I tried changing the `props.arc.color` of the arc of a simple gauge component to `var(--qual-2)` and it just turns black. I tried other theme colors and am getting the same result.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/6/06b41ce3898d7d025d2181d80b639782d669010c.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fdcbaf5da7a2201e63963adb473355c699214bce.png)

Has anyone else had this issue?

I'm running 8.1.42 on this gateway.

edit: same results with `props.arcBackground.color` and `props.label.color` I could make a script binding to check the theme then set the color, but that's less than ideal.

---

<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 23, 2024, 4:51pm UTC](https://forum.inductiveautomation.com/t/cannot-change-arc-color-of-simple-gauge-to-theme-colors/95088/2 "2024-08-23T16:51:29Z")

</div>

> [@Perspective Css-Theme-Variable not working on all Controls](https://forum.inductiveautomation.com/t/perspective-css-theme-variable-not-working-on-all-controls/66629/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 …

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 23, 2024, 5:06pm UTC](https://forum.inductiveautomation.com/t/cannot-change-arc-color-of-simple-gauge-to-theme-colors/95088/3 "2024-08-23T17:06:01Z")

</div>

If I had to guess, I'd say those are "regular" properties, different than the ones you find under `style` and that the style ones are converted to css while the regular ones are not.  
Which means trying to use a css variable doesn't work.

As a workaround, you can try using the stylesheet.  
Warning: This is a svg and navigating in there is... ugh.  
This one worked for me (for the filled part), I'm not sure how reliable it is, but you can try:

```css
#gauge-C\.0\:2 > div > svg > g > g:nth-child(2) > g:nth-child(1) > g > g > g > g > g > g:nth-child(1) > g > g:nth-child(1) > g:nth-child(2) > g:nth-child(1) > g > g:nth-child(3) > g > g:nth-child(1) > g > g:nth-child(1) > g > g:nth-child(3) {
	fill: var(--qual-2);
}

```