# Perspective Designer shows error if CSS variables used as colors

**URL:** <https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327>\
**Category:** Ignition Early Access\
**Created:** [June 4, 2020, 2:12pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327 "2020-06-04T14:12:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [June 4, 2020, 2:12pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/1 "2020-06-04T14:12:09Z")

</div>

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.

> [@\[NEW\] Theming Update: Major Visual Changes in Perspective](http://forum.inductiveautomation.com/t/new-theming-update-major-visual-changes-in-perspective/34020):
>
> 8.0.13 introduces some major visual changes in Perspective. Theming has been overhauled and fully implemented. The result is a culmination of many months of intensive design, development, quality assurance, and collaboration. A sincere thank you to everyone who was involved in this project. In brief, here is what you need to know about the changes to theming in Perspective. For a more detailed introduction into what theming is meant to solve and the theory behind it, keep a lookout for an upcom…

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](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/80bc44182ef486b0e7133fd9bf4f3940f3d6f6d7.png)

I think it would be great if the designer recognized the variables as a valid format.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 4, 2020, 2:15pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/2 "2020-06-04T14:15:05Z")

</div>

You can also change the property name to background and the error will go away, however I do agree that you should be able to use that in backgroundColor!

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [June 4, 2020, 2:33pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/3 "2020-06-04T14:33:10Z")

</div>

It’s just `--variable`. No need to wrap it in `var()`.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 4, 2020, 2:40pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/4 "2020-06-04T14:40:04Z")

</div>

What a genius idea! Its almost like you made the thing 🤔

Just tested it in the same nightly and it worked great, not sure where I also had the idea that var() was needed?

---

<div class="post-metadata">

**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\
**Post date:** [June 4, 2020, 2:44pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/5 "2020-06-04T14:44:20Z")

</div>

Even Better! Thank you

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [June 4, 2020, 2:48pm UTC](https://forum.inductiveautomation.com/t/perspective-designer-shows-error-if-css-variables-used-as-colors/35327/6 "2020-06-04T14:48:04Z")

</div>

No worries. I can tell you that I’ve made the same mistake before as well.