# My CSS root variables not working in themes

**URL:** <https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 3, 2024, 6:59pm UTC](https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791 "2024-10-03T18:59:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anton\_Westerberg](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@Anton\_Westerberg](https://forum.inductiveautomation.com/u/Anton_Westerberg)\
**Post date:** [October 3, 2024, 6:59pm UTC](https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791/1 "2024-10-03T18:59:10Z")

</div>

I'm using Perspective together with a custom made module with components that should be using a set of CSS root variables.

I need to be able to change the set of CSS root variables dynamically, as they represent Day/Dusk/Night colour maps. For this, it makes sense to use the theme structure which sets the used CSS as a session variable.

The problem I've encountered is that the CSS root variables does not apply to my views, when I add them in a custom theme - It only applies as it should when added to the advanced style sheet?

A slice of the CSS root variables for the Dusk map looks like this:

```python
:root {
  --element-active-color: rgb(242, 242, 242);
  --element-neutral-color: rgba(255, 255, 255, .550);
  --element-inactive-color: rgba(255, 255, 255, .350);
  --element-disabled-color: rgba(255, 255, 255, .150);
}

```

I've tried to add this at different levels in my CSS theme, even as a part of the already defined root variables in \themes\dusk\variables.css.

When I inspect the page in the Chrome browser, i see my root variables as part of the:

```python
<link rel="stylesheet" href="/data/perspective/themes/dusk.css" />

```

But they do not make any effect to my components?

If I instead add the same root variables to the advanced style sheet in the designer, it will apply to the Components. The only difference when I inspect the page in Chrome is that the root components will be available in the CSS-reference just below the theme CSS, namely in:

```python
<link rel="stylesheet" href="/data/perspective/style-classes/MyProject/-1828856647/style.css" />

```

Can anyone understand how this can make a difference to how the components reads the root variables?

If the conditions are unclear, please ask so I can clarify.

Many thanks.

---

<div class="post-metadata">

**Author:** ![flexware](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/flexware/32/66243_2.png) [@flexware](https://forum.inductiveautomation.com/u/flexware)\
**Post date:** [October 3, 2024, 7:33pm UTC](https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791/2 "2024-10-03T19:33:20Z")

</div>

Do you have separate themes for Day/Dusk/Night (like separate theme files)? Or are you just trying to update the variables from the runtime?

---

<div class="post-metadata">

**Author:** ![Anton\_Westerberg](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@Anton\_Westerberg](https://forum.inductiveautomation.com/u/Anton_Westerberg)\
**Post date:** [October 4, 2024, 6:58am UTC](https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791/3 "2024-10-04T06:58:06Z")

</div>

> [@flexware](#):
>
> Do you have separate themes for Day/Dusk/Night (like separate theme files)? Or are you just trying to update the variables from the runtime?

Hi, no I have different theme files for the different modes, I'm not trying to update the root variables dynamically.

Thanks

---

<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:** [October 4, 2024, 7:38am UTC](https://forum.inductiveautomation.com/t/my-css-root-variables-not-working-in-themes/96791/4 "2024-10-04T07:38:02Z")

</div>

In the inspector you should be able to see your css file, does it appear there? And what else do you see here?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4e70d7e0522cb94f3522341713f598fdf6e35193.png)

and show me what shows up when you use this varriable on an element (hover over it)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/58cbc64c8015757c071d05289f5233436a26f80f.png)