Site CSS use of :root and var() within a group.

I am trying to use :root in a widget css file that is used within groups, which actually does not seem to work at all, but perhaps that should be reserved for the site.css.  

However, is there away to set style properties for the document then use var() to get css parameters set in the widget.. this is more for setting a theme... so setting it would look like:

document.documentElement.style.setProperty('--theme-darkness', val);

Then in the style sheet:

.myCustomApplicationClass {
background-color: val(--theme-darkness);
}

I'm asking in the 11.x group because we need to upgrade, but wondering if this is possible in 9.x, or in 10 or 11.

Also, if this would not be possible at the group level or if I'm approaching this wrong, please enlighten. 

Thanks in advance.

Parents Reply Children
No Data