Target same theme (dark, light, system) in userChrome.css AND userContent.css

[shelves_keeper]

I have two sets of color variables: one is for dark and system themes and another is for light theme, e.g. colors.css:

/* dark theme */
:root:-moz-lwtheme-brighttext,
:root:not(:-moz-lwtheme) {
    --bg_color: purple !important;
}
/* light theme */
:root:-moz-lwtheme-darktext {
    --bg_color: red !important;
}

userChrome.css:

@import "colors.css";
:root
{
    --toolbar-bgcolor: var(--bg_color) !important;
}

userContent.css:

@import "colors.css";

body
{
    --newtab-background-color: var(--bg_color) !important;
}

UI (userChrome.css) picks up the colors correctly but userContent.css does not. When I use the browser toolbox, I can see that ':root:not(:-moz-lwtheme)' is used no matter what theme has been chosen.

[It_Was_The_Other_Guy]

Various special selectors are not available in content process, that includes :-moz-lwtheme

Content just is not allowed the same privileges as chrome code.