Stylesheet, variables in themes

Hi all :slightly_smiling_face:

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:

: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)? :thinking:

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

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

Nice, that worked, thanks! :saluting_face:

1 Like