# Stylesheet, variables in themes

**URL:** <https://forum.inductiveautomation.com/t/stylesheet-variables-in-themes/68777>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 19, 2023, 7:55am UTC](https://forum.inductiveautomation.com/t/stylesheet-variables-in-themes/68777 "2023-01-19T07:55:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [January 19, 2023, 7:55am UTC](https://forum.inductiveautomation.com/t/stylesheet-variables-in-themes/68777/1 "2023-01-19T07:55:44Z")

</div>

Hi all 🙂

Anyone knows if it is possible to override e.g. color variables in different themes with the stylesheet.css in the designer?

Defining our own color variables inside the variables.css in the different themes is working good, but out of curiosity, how can we use the stylesheet.css to achieve the same result?

By writing the following css-code, a color can be defined in the stylesheet.css:

```auto
:root{
	--testcolor: #00FF00;
}

```

But if I want to have --testcolor to be #FF0000 in e.g. the light theme, and #00FF00 in the dark theme, what is the syntax to do that in the stylesheet.css (point to different themes)? 🤔

---

<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:** [January 19, 2023, 11:07am UTC](https://forum.inductiveautomation.com/t/stylesheet-variables-in-themes/68777/2 "2023-01-19T11:07:26Z")

</div>

if you are using an updated browser, you could do something very cheeky...

```auto
html:has(head link[href$="themes/light.css"]) body{
    --testcolor: #00FF00;
}

```

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [January 19, 2023, 11:22am UTC](https://forum.inductiveautomation.com/t/stylesheet-variables-in-themes/68777/3 "2023-01-19T11:22:01Z")

</div>

Nice, that worked, thanks! 🫡