css rules not applying on different theme class

[ItsHaysus]

So i have a set of css rules to handle light mode ( or default)

example:

.featured[min-width = 451px]{
font-size; 14px;
}

this works fine for the default theme, but then i have a css rule to handle dark mode, ex:

.darktheme .featured[min-width = 451px]{
font-size; 20px;
}

and now my styling doesnt work, i talked to some peers and apparently the JS logic to apply the rules might not work when there are non standard classes in front of the parent class. Is there any previous issues about this? can someone guide me on a way to fix it, i assume the issue lies in ElementQueries.JS under the "ApplyRules" function. I'd appreciate any help on fixing this issue.

[marcj]

It might be that "darktheme" is added after styles were already applied. In this case you have to call "ElementQueries.init();" again.

[ItsHaysus]

It might be that "darktheme" is added after styles were already applied. In this case you have to call "ElementQueries.init();" again.

Not sure about that. Both default and dark mode have similar class structure, default theme has theme-default, and dark them has theme-dark on the parent div class.

The only difference is that when we call the styling we dont specify .theme-default since theyre the default one, its only when we want different styling for .theme-dark that they stop being applied. Not sure if im explaining correctly but basically both theme-default and theme-dark are loaded identically.

[marcj]

is darktheme added via JavaScript (React/Vue/Angular/jQuery) ?

[ItsHaysus]

is darktheme added via JavaScript (React/Vue/Angular/jQuery) ?

Its added in the markup via server side