# Transform Questions

**URL:** <https://forum.inductiveautomation.com/t/transform-questions/101574>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 29, 2025, 7:48pm UTC](https://forum.inductiveautomation.com/t/transform-questions/101574 "2025-01-29T19:48:58Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![AUSDIV](https://avatars.discourse-cdn.com/v4/letter/a/e47c2d/32.png) [@AUSDIV](https://forum.inductiveautomation.com/u/AUSDIV)\
**Post date:** [February 3, 2025, 1:51pm UTC](https://forum.inductiveautomation.com/t/transform-questions/101574/22 "2025-02-03T13:51:01Z")

</div>

I see.

So basically, use CSS variables _Always_, that is simple enough. It would also be good to always bind the variable to a custom session prop so updating one updates all 'like' components on the project?

---

<div class="post-metadata">

**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:** [February 3, 2025, 1:52pm UTC](https://forum.inductiveautomation.com/t/transform-questions/101574/23 "2025-02-03T13:52:27Z")

</div>

That depends on what you would put in that custom prop.  
It should not be necessary in most cases, since that's what the css variables are for. If you need to change the color, your change the value of the variable, and it will update everything that uses it.

---

<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:** [February 3, 2025, 10:57pm UTC](https://forum.inductiveautomation.com/t/transform-questions/101574/24 "2025-02-03T22:57:24Z")

</div>

The main issue from your first posts (

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/2/d2850307e245d354fc8838055c3878f41b09156c.png)  
)  
were that you are binding to the `session.props.theme` to do you colour switching for different themes.

Instead, you should have two sets of CSS in your themes folder (Windows default: `C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes`): one each for your light and dark themes.

Inside, for example, a `variable.css` file in each theme folder, you should define the colours for your shifts. For example:

Light theme:

```python
:root {
	--shift-bg--1: #ffffff;
	--shift-bg--2: #fffffe;
	--shift-bg--3: #fffffd;
}

```

Dark theme:

```python
:root {
	--shift-bg--1: #000000;
	--shift-bg--2: #00000e;
	--shift-bg--3: #00000d;
}

```

The colours are obviously just dummy values and should be replaced by the colours you want to show when in each theme.

Then to use them in your UI, you would use a binding to your `self.props.text`, for example, like:

**Expression Binding on `props.style.backgroundColor`**

```python
case({self.props.text}
	,'First Shift', 'var(--shift-bg--1)'
	,'Second Shift', 'var(--shift-bg--2)'
	,'Third Shift', 'var(--shift-bg--3)'
	,'#fff'
)

```

This is a very simple demonstration, however I prefer not to directly reference CSS variables at all in my UI since they're not readily searchable without going into the theme files. I prefer instead to reference CSS variables inside of Perspective Styles and then using those in my UI.

For example, I would create perspective styles for each shift, including the fallback:

```python
Shifts/1: background-color: var(--shift-bg--1)
Shifts/2: background-color: var(--shift-bg--2)
Shifts/3: background-color: var(--shift-bg--3)
Shifts/Fallback: background-color: #fff

```

and then bind to the ui components' `style.classes` prop:

**Expression Binding on `props.styles.classes`**

```python
case({self.props.text}
	,'First Shift', 'Shifts/1'
	,'Second Shift', 'Shifts/2'
	,'Third Shift', 'Shifts/3'
	,'Shifts/Fallback'
)

```

---

<div class="post-metadata">

**Author:** ![AUSDIV](https://avatars.discourse-cdn.com/v4/letter/a/e47c2d/32.png) [@AUSDIV](https://forum.inductiveautomation.com/u/AUSDIV)\
**Post date:** [February 4, 2025, 7:05pm UTC](https://forum.inductiveautomation.com/t/transform-questions/101574/25 "2025-02-04T19:05:52Z")

</div>

I will investigate this, thank you for a detailed example of the preferred method!!

[Previous page](https://forum.inductiveautomation.com/t/transform-questions/101574.md?page=1)