# \[feature\] Get property from style class

**URL:** <https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [September 22, 2022, 8:28pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389 "2022-09-22T20:28:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [September 22, 2022, 8:28pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/1 "2022-09-22T20:28:51Z")

</div>

I would like to obtain with script or expression some style property, especially background.

Use case  
In some component with color property, and without style to drive it, I dont want to hard code the color value…

Is there any way to manipulate style classe with script or sdk ?

---

<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:** [September 22, 2022, 9:30pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/2 "2022-09-22T21:30:16Z")

</div>

I’m not sure that I understand your question but if you want to change the style then …

- Create the two styles in `Perspective | Styles`.
- In the Perspective Property Editor select one of the styles in `props.style.classes`.
- Add an expression binding to the `props.style.classes`. In the example below we change the style from `blinking` to `noBlink` depending on the value of tag\_x.  
`if({[default]tag_x}, "blinking", "noBlink")`

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [September 22, 2022, 10:59pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/3 "2022-09-22T22:59:36Z")

</div>

Are you asking specifically about modifying Perspective style classes or just the `style` property of certain components?

Just to get the easiest case out of the way:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15574e95e4a42c5d6a01e308305405977dc90183.png)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [September 23, 2022, 2:00am UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/4 "2022-09-23T02:00:23Z")

</div>

The issue is for example to set a color property on a component, this color property is not in a style class.  
I would like to read the value of the color from a style ressource.

---

<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:** [September 23, 2022, 6:09am UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/5 "2022-09-23T06:09:13Z")

</div>

It's still not clear what you are asking. Can you add a bit more detail what problem you're trying to solve?

> [@mazeyrat](#):
>
> I would like to read the value of the color from a style ressource.

You can't read the CSS files, as far as I know.  
Are you using themes properly? (They're great for maintaining consistency across an application.)

[https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes)

See down at the bottom where all the presets are defined for you.

---

<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:** [September 23, 2022, 7:57am UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/6 "2022-09-23T07:57:08Z")

</div>

> [@Transistor](#):
>
> You can’t read the CSS files, as far as I know.

True you cant really get the css file, but the styles are stored in json.

C:\Program Files\Inductive Automation\Ignition\data\projects\PROJECTNAME\com.inductiveautomation.perspective\style-classes\STYLENAME\style.json

Idk why you would want to get this though. if you want to use fixed/dynamic colors in a style, you can use `var()` or `--` (i think?)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [September 23, 2022, 12:33pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/7 "2022-09-23T12:33:36Z")

</div>

Yes I use some theme variable for main colors, but other colors are stored in style classes.

---

<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:** [September 23, 2022, 12:47pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/8 "2022-09-23T12:47:26Z")

</div>

You can also create your own css variables in the :root

(example with injection)  
`} :root{--test:red;} {`

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

(note that it might take a restart of the page before it works in the designer)

---

<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:** [September 23, 2022, 12:56pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/9 "2022-09-23T12:56:18Z")

</div>

> [@mazeyrat](#):
>
> Yes I use some theme variable for main colors, but other colors are stored in style classes.

I still don't understand what you are trying to do. Please give us an example with some screenshots and code.

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [September 23, 2022, 1:20pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/10 "2022-09-23T13:20:27Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/5/45f71b9c912539f079edeb6d397a1f9921667d6c.png)  
just a wat to bind the color from a styles class to the color property of an icon

---

<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:** [September 23, 2022, 1:31pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/11 "2022-09-23T13:31:48Z")

</div>

OK. You want to **apply a color defined in a style to a component that does not accept style classes** such as the icon component. (This is sensible as it allows you to maintain the theme.)  
I can’t see a way to do that. I’ll have a further think.

---

<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:** [September 23, 2022, 2:20pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/12 "2022-09-23T14:20:40Z")

</div>

> [@mazeyrat](#):
>
> just a want to bind the color from a styles class to the color property of an icon

A style class that sets the Font Color will do this. Is there any reason it needs to be done in binding instead of just using the style itself?

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

---

<div class="post-metadata">

**Author:** ![Davis\_Tolbert](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@Davis\_Tolbert](https://forum.inductiveautomation.com/u/Davis_Tolbert)\
**Post date:** [October 31, 2024, 2:50pm UTC](https://forum.inductiveautomation.com/t/feature-get-property-from-style-class/64389/13 "2024-10-31T14:50:40Z")

</div>

I know this thread hasn't been posted to for awhile, but I did discover something that I wanted to document here for anybody who comes across this and specifically needs it.If you are trying to style an SVG component (specifically an embedded one) it will not accept styles by default. However, if you go to a portion of an element that you want to style and has properties that can be contained within a style like this for instance.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bfff15b4da7c246a6de2f0c81d3808bf754ad46.png)

You can overwrite the properties contained within that object by pasting over it with a copy of the style object.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a8cd894fd646a8db1925716e7718fab0c3954690.png)

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

and after that the style at the 'Props' level will adjust the values just as you'd expect it to. Hope someone finds this useful!

As a note this was done in 8.1.43.
