# Calling variables from View PROPS

**URL:** <https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 20, 2024, 4:38am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608 "2024-03-20T04:38:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve\_Booth](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_booth/32/82019_2.png) [@Steve\_Booth](https://forum.inductiveautomation.com/u/Steve_Booth)\
**Post date:** [March 20, 2024, 4:38am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608/1 "2024-03-20T04:38:00Z")

</div>

I have set up some color variables in a styles.css sheet which is imported to the light.css sheet in the Themes directory. I'm working in Perspective with an alarm table view. My session theme is 'light'.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a205b9049097c68a1ecaf21018448d5e67379b4.png)

I want to use these to style my rows in the alarm table.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/7/57de9bdc6d97a7dd2dd0945a683ce3a3464161df.png)

When I add the variable name, it does not find the reference color.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7afc5a8e1d919a6894d39a1e112754c2a1e0a8a1.png)

I also noted that the rgba format for color doesn't work here.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1c77adab328dc849bb5aa868bf527fd29d89380.png)

Any advice for me here? I have tried the manual and forum.  
Thanks

---

<div class="post-metadata">

**Author:** ![Hayden\_Watson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hayden_watson/32/48792_2.png) [@Hayden\_Watson](https://forum.inductiveautomation.com/u/Hayden_Watson)\
**Post date:** [March 20, 2024, 8:17am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608/2 "2024-03-20T08:17:21Z")

</div>

You're probably best defining a class and assign these as to that class and setting the alarm table to that class

---

<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:** [March 20, 2024, 9:31am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608/3 "2024-03-20T09:31:53Z")

</div>

> [@Steve\_Booth](#):
>
> I have set up ... in a styles.css sheet which is imported to the light.css sheet in the Themes directory.

I think you have done this backwards. The default themes are overwritten on each upgrade or reinstall. The recommendation is that you create your own theme and import an Ignition theme into yours instead. This also means that when you put  
`@import "./light/index.css";`  
at the top of your CSS file that you can overwrite any existing styles by redefining them below that line.

> **[Creating and Using Custom Perspective Themes | Ignition User Manual](https://docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/creating-and-using-custom-perspective-themes#creating-a-custom-theme)**
>
> Theme Overview

I can't see what's wrong with your color definitions. Maybe check in your browser's development tools (F12) and see if they're listed down at the bottom.

---

<div class="post-metadata">

**Author:** ![Steve\_Booth](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_booth/32/82019_2.png) [@Steve\_Booth](https://forum.inductiveautomation.com/u/Steve_Booth)\
**Post date:** [March 20, 2024, 10:12am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608/4 "2024-03-20T10:12:17Z")

</div>

Yes I see that the default alarm table colours are overwritten at start up. I worked a way around this with a start up script to reset the colours to my choosing but I think you are right in stating that creating a dedicated class would be cleaner. I'll have a crack at that. Cheers.

---

<div class="post-metadata">

**Author:** ![benp](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benp/32/34073_2.png) [@benp](https://forum.inductiveautomation.com/u/benp)\
**Post date:** [July 5, 2024, 12:14am UTC](https://forum.inductiveautomation.com/t/calling-variables-from-view-props/87608/5 "2024-07-05T00:14:44Z")

</div>

Hi Steve, you were 99% there ! You just have to encapsulate your variable name in var(--myVar) like this:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47ce7832960f8886cfa77d76cc3dd9dcea7dc643.png)

It might "complain" about it and show the parameter in red, but it does accept it. Sometimes it might not render it directly in the designer for some reasons, but it eventually does and it always render in the browser anyway. We've used that method across several projects and never had an issue.

However I would not recommend you editing the Ignition default themes as those can be overridden in some instances like on an Ignition upgrade I suppose. The way to go with it is to create your own theme. You can import in it the Ignition light theme as a base and then add all the css you want. Your own custom theme will remain in the directory and won't be overridden.

You can then select your own custom theme in the perspective project properties:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d9f3f2bbdd117277731ecee4f0788c2f0c365cc.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/62744b98d0638e24a382ee2561bf5b97faa8fc9c.png)

Some reading around Ignition themes:

> **[Creating and Using Custom Perspective Themes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/creating-and-using-custom-perspective-themes)**
>
> Theme Overview
