Expose background color to JS?

[ryanpcmcquen]

I'd like to detect dark themes with my extension, and apply a CSS filter based on that, but I can't find a way to access the style kit background color inside of my extension, I've tried all the ComponentManager permissions I can find, but nothing seems to have the style sheet. I can access the the name of the style sheet under activeThemes, but I can't read the CSS rules because of iframe CORS limitations. Is there a way to just get the background color of the parent html passed down?

[ryanpcmcquen]

More details here: ryanpcmcquen/standardnotes_org_mode_editor#5

[ryanpcmcquen]

message: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

[moughxyz]

Hmm..probably not yet a good way to access these from JS. Why not use the var inside of a stylesheet? You can access all sn-stylekit-vars inside your stylesheet, even if they were loaded externally.

[ryanpcmcquen]

I need to conditionally change the filter based on the value ... I don't think that is possible with CSS, but maybe there is a way to do it?

[ryanpcmcquen]

@mobitar, so I'm trying a hack, where I make a hidden span, and assign its color to be --sn-stylekit-background-color, but it isn't populating. I thought the CSS vars were available ...

https://github.com/ryanpcmcquen/standardnotes_org_mode_editor/blob/gh-pages/styles.css
https://github.com/ryanpcmcquen/standardnotes_org_mode_editor/blob/gh-pages/index.html

[moughxyz]

What do you mean by isn't populating? In my experience vars don't appear as resolved when using dev tools inspector. It will still say the variable name. This var in particular defaults to white.

[ryanpcmcquen]

I am reading the span using getComputedStyle(document.querySelector('.__data_from_root__')).color, but the value is always rgb(0, 0, 0).

I have tried switching between themes and refreshing the page, but the value never changes.