How can I intercept added styles?

[asabryil]

Say I have a component with some of the built in Style Manager properties.

How can I intercept changes to these styles before they are added to the CSS output, for example if I set the background color to red, how can I before the background turns to red change it to green, and also how can I change the selector it targets to added a .dark class selector before the component selector for dark theme support?

Also adding styles using CSSComposer.addRules with the selector starting with .dark does not sync with the actual properties inside the Style Manager. So If I add a manual rule like this .my-comp {background-color: green;} .dark .my-comp{background-color: red;}, the background color property inside the Style Manager still has the green color even If I set the body/html element of the canvas. to have the .dark class.

I've tried extending setStyle but it didn't work except for the default styles, tried to hook onto CSSComposer.addRules,setRules but none of them worked.