# Support for CSS declared variables in perspective style classes?

**URL:** <https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 1, 2022, 1:11am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116 "2022-12-01T01:11:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wildbilly](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wildbilly](https://forum.inductiveautomation.com/u/wildbilly)\
**Post date:** [December 1, 2022, 1:11am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/1 "2022-12-01T01:11:16Z")

</div>

Seems likes perspective styles should support this. It works as component property. Alternatively, if anyone is aware of another way to get a theme supported color like this to work I'd be interested in that as well. What is weird is --label works in designer but not on the client 😕

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aab22612529006ee16cd42aeacc338ae3c818439.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/578ef79aae88950837da541d64c19f4f73a6fc4b.png)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [December 1, 2022, 1:28am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/2 "2022-12-01T01:28:10Z")

</div>

I'm not sure what the reason is, but named variables in perspective styles have to be wrapped inside of `var()`, so try `var(--neutral-100)` instead.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2022, 2:09am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/3 "2022-12-01T02:09:40Z")

</div>

fwiw, I don't suggest referencing variables within component styles directly - always reference them inside of Perspective Styles and use these on components. Not a hard and fast rule, but it will make the learning curve for someone else who comes in to work on the system much easier, since PStyles are selectable in a list and CSS variables are hidden away in files

---

<div class="post-metadata">

**Author:** ![wildbilly](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wildbilly](https://forum.inductiveautomation.com/u/wildbilly)\
**Post date:** [December 1, 2022, 2:13am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/4 "2022-12-01T02:13:27Z")

</div>

That is sound advice. The only time i've ever had cause to use style props over Pstyles is just for this reason... When I couldn't get the expected behavior from Pstyles. But, the post above solves that 🙏

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2022, 2:16am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/5 "2022-12-01T02:16:07Z")

</div>

Just to be clear though, I definitely support and encourage creating your own CSS theme(s) and CSS variables and using these in PStyles

---

<div class="post-metadata">

**Author:** ![wildbilly](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wildbilly](https://forum.inductiveautomation.com/u/wildbilly)\
**Post date:** [December 1, 2022, 2:20am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/6 "2022-12-01T02:20:43Z")

</div>

I need to catch up on the latest CSS updates in perspective. I know they've added some new features... Was always looking for better support for keyframes... I know it was possible before but not straightforward and the CSS files overrode on service startup.. Its been awhile since I've played with it. I am glad I made this post as this has been a pita for me lol

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2022, 2:51am UTC](https://forum.inductiveautomation.com/t/support-for-css-declared-variables-in-perspective-style-classes/67116/7 "2022-12-01T02:51:46Z")

</div>

> [@wildbilly](#):
>
> CSS files overrode on service startup.

Hence needing to create your own theme. The standard IA theme files are overwritten