# Use CSS Variable instead of Python Script **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 7, 2023, 1:45am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501 "2023-08-07T01:45:05Z")\ **Posts on this page:** 18\ **Page:** 2
**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\ **Post date:** [August 11, 2023, 6:17am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/26 "2023-08-11T06:17:54Z")
> [@Eugene49](#): > > Is there an advantage favoring the use of expression? I'll link this post FYI, very useful read > [@Building for Performance](https://forum.inductiveautomation.com/t/building-for-performance/71082/3): > > In this example, #3 is the most performant, though it could be argued that the performance gain in this instance would be negligible. Anytime you add an additional processing step you add latency. In general for the best performance I follow these guidelines: If you can achieve what you want with a binding, use a binding. Always use the binding type that is the most direct. (e.g. if all you need is a binding to a property use a property binding, not an expression binding.) Given the choice b… ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 11, 2023, 8:16am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/27 "2023-08-11T08:16:21Z")
> [@Eugene49](#): > > What I did, I created 4 global variables in python, and pass those variables to background of each flex? To remain consistent project wide. > What is wrong with this? What's wrong with this is that it's much more complicated than using the built-in mechanisms, and it involves things that have nothing to do with it - in this case, you're involving python for something that only concern the front-end, adding more layers of complexity into the processing of something that should be quite trivial. To figure out the proper course of actions, answer those questions: 1. are those colors fixed, or can they change ? 2. are they used somewhere else ? And by that I mean that if one of those colors changes, it needs to change in other places as well. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 12, 2023, 6:44pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/28 "2023-08-12T18:44:50Z")
Gentlemen, Noted on the use of expression. And noted on use of styles for Aesthetic purpose. But using styles, I will need to get used to memorizing hex code. For instance neon green #265F400 where I use it on different components, like values and highlights. - this was the main reason why I used python variable and binding, example background = theme.neonGreen - Another one: On the components style dropdown, I wish they can be collapse/hidden into folders, and not show all at once. My bad on parameter=null when opening the view on designer. To my surprise it was a case of race conditions. This was answered on the 2nd post (use expression structure). ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [August 12, 2023, 7:19pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/29 "2023-08-12T19:19:10Z")
> [@Eugene49](#): > > But using styles, I will need to get used to memorizing hex code. For instance neon green #265F400 where I use it on different components, like values and highlights. No, you won't. You can create a CSS Variable, and then set the colors like this: ```auto var(--NeonGreen) ``` There are already pre-defined colors in the provided themes that come stock with the Perspective module, such as `var(--callToAction)` You can even use `rgba(255,0,0,1)` or `hsl(0,100%,50%)` if you must. Create style classes and then just by applying the styles your components get assigned the colors you want for that type of component or function. No need to input colors with the creation of every component. And if you need to update a color the change can be made from a single convenient place. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 12, 2023, 7:32pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/30 "2023-08-12T19:32:29Z")
> [@lrose](#): > > You can create a CSS Variable, and then set the colors like this: Does this involves creating/editing .css file on the installation folder? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [August 12, 2023, 7:34pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/31 "2023-08-12T19:34:49Z")
It doesn't have to, no. In older versions you would have to create your own theme files to accomplish this, now you should be able to use the Stylesheet resource. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 12, 2023, 7:43pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/32 "2023-08-12T19:43:08Z")
Just saw this, in the manual under Style Classes. I will play with this. Thanks. ---
**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:** [August 12, 2023, 10:01pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/33 "2023-08-12T22:01:09Z")
> [@lrose](#): > > var(--callToAction) Note, you should only reference these with `var` if you use them inside of perspective styles. Outside of these though, just use the variable name `--green-neon` However, I would still suggest using Perspective styles over direct colour references, since css variables aren't selectable from a dropdown, so aren't all that dev friendly. Use the css variable names in your p styles. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 12, 2023, 11:06pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/34 "2023-08-12T23:06:53Z")
i was hoping you would reply with your fancy screenshot. 🙂 Edit: was referring to transistor. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 13, 2023, 1:08am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/35 "2023-08-13T01:08:53Z")
Is this how you would write a global css variable in perpective? ![Screenshot_20230812_200342_Firefox](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/5/e569c8abeb5cbb8f120dd26ff5b1a25abbeeace4.jpeg) if i create a global css variable, would I able to call that variable under component style properties, example backgroundColor: neonGreen. ? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [August 13, 2023, 3:56am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/36 "2023-08-13T03:56:07Z")
You can reference it with `var()`, but as Nick mentioned, the recommended way is to reference it in a Style class, then select that class in the classes drop-down. This avoids the pesky red highlight telling you that it doesn’t match the expected pattern. ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 13, 2023, 4:25am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/37 "2023-08-13T04:25:54Z")
This really helped big Time.... Thank you guys. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4f5a4d0cbc2ba2591f32b959e325b56025615ce1.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/9/19985a095a42b983d058ec827fdbad1b6baa5f12.png) You need to reopen project or saved or reopen the view though, before the extended stylesheet to kick in. It's one or the other. It was a bit quirky when I did it, sometimes it work, and then it stopped. Hope this finally stays. ---
**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:** [August 13, 2023, 4:53am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/38 "2023-08-13T04:53:31Z")
> [@lrose](#): > > This avoids the pesky red highlight telling you that it doesn’t match the expected pattern It only does this if you use `var` to reference it. Without var, there's no warning, as in @Eugene49 's screenshot ---
**Author:** ![Eugene49](https://avatars.discourse-cdn.com/v4/letter/e/c6cbf5/32.png) [@Eugene49](https://forum.inductiveautomation.com/u/Eugene49)\ **Post date:** [August 14, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/39 "2023-08-14T14:59:17Z")
Really headache to switch from styles to view, back and forth. Hope we can dock style separately, like on scripting. Is there a way to open styles and view at the same time? ---
**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:** [August 14, 2023, 10:00pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/40 "2023-08-14T22:00:23Z")
> [@Eugene49](#): > > Hope we can dock style separately, like on scriptin Wait, there's a way to undock scripting from the project browser so you can have scripting and gui open at the same time?? 🤔 I can't say I've tried to do this, but it would be _great_! ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [August 14, 2023, 10:29pm UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/41 "2023-08-14T22:29:36Z")
Right click the tab strip heading and there's an option to 'Float' the frame. IMO, platform level features like scripting and named queries used everywhere should just _automatically_ float, instead of opening a separate workspace at all. It's relatively high on my list of designer UX improvements. ---
**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:** [August 15, 2023, 1:16am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/42 "2023-08-15T01:16:50Z")
> [@paul-griffith](#): > > Right click the tab strip heading and there's an option to 'Float' the frame. This only floats the Project Browser panel though (and only for the selected workspace [Scripting/Perspective/Vision/etc] apparently) > [@paul-griffith](#): > > platform level features like scripting and named queries used everywhere should just _automatically_ float, instead of opening a separate workspace at all This sounds great; it's a bit of a pain when you're constantly going between Perspective / Scripting / Named Queries and the entire workspace changes. It would be far better if this was all seamless, and as you say, if you could have them both open at the same time that would be _amazing_. I actually open 2 designers if i'm using both scripting and Perspective for this simple reason ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 15, 2023, 8:18am UTC](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501/43 "2023-08-15T08:18:33Z")
Most of my scripts are in another project anyway... So I have the 2 designers opened pretty much at all time. [Previous page](https://forum.inductiveautomation.com/t/use-css-variable-instead-of-python-script/77501.md?page=1)