# Perspective Referencing CSS Variables changed?

**URL:** <https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 19, 2023, 4:30am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618 "2023-04-19T04:30:14Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [April 19, 2023, 4:30am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618/1 "2023-04-19T04:30:14Z")

</div>

I would normally reference CSS variables with `var(--var-name)`, but I accidentally just typed `--var-name` into a style prop value, and it worked... have I been unnecessarily wrapping in `var()` this whole time?? Without the wrapper function, I no longer get a warning too

---

<div class="post-metadata">

**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\
**Post date:** [April 19, 2023, 5:07am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618/2 "2023-04-19T05:07:16Z")

</div>

I don't want to say it, but...yes, you have 🙈

> [@Perspective Designer shows error if CSS variables used as colors](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327):
>
> I thought it would be a good idea to utilize some of the CSS variables to set some of my background colors. I wanted my project to remain consistent with the selected theme. I’m using nighlty 8.0.14 (b2020051802) which includes the theme update. For example, I’ve set a background colors in a menu tree to a variable value: backgroundColor : var(--neutral-30) which works great but the designer doesn’t like it [image] I think it would be great if the designer recognized the variables as a v…

---

<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:** [April 19, 2023, 5:09am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618/3 "2023-04-19T05:09:57Z")

</div>

Well then... off I go to remove 10%\* of the words in my project 🤦‍♂️

\*may be an exaggeration for dramatic effect

---

<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:** [May 3, 2023, 12:13am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618/4 "2023-05-03T00:13:04Z")

</div>

I found out why I used `var(...)`. You need to use this within Perspective Styles 😕 You can't just use the variable name there. I'd like to know the technical reason why for understanding

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 3, 2023, 9:17am UTC](https://forum.inductiveautomation.com/t/perspective-referencing-css-variables-changed/72618/5 "2023-05-03T09:17:17Z")

</div>

for css you need the var(), so i guess perspective must have a function that converts this in the designer. when it sees the "--"

imho you should still use var(), even with the warning