My CSS root variables not working in themes

Ignition
1

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:

: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:

<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:

<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.

2

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?

2 Likes
3

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

Thanks

4

In the inspector you should be able to see your css file, does it appear there? And what else do you see here?
image

and show me what shows up when you use this varriable on an element (hover over it)
image