Need Help selectively applying to components and elements

[ghost]

wondering if there is a method to selectively apply this to only specific elements, or a method to override the filter on such specific elements

like suppose primary theme colour is $primary: #0000ff and I don't want it to invert with everything else?

[Heydon]

Hi! No reason why you couldn't do something like that, but it would be more complex than simple inversion if you wanted to keep certain colors.

[ghost]

so sort of like this but for colours?

if (this.props.preserveRasters) { this.css += 'img:not([src*=".svg"]), video, [style*="url("] { filter: invert(100%) }' }

[ghost]

alternatively is there a way to apply this to only specific elements or theme colours? Might be faster in a method like this if the project is large.

[ghost]

update

I did find that i could use something like id="banana" on some elements that I did not want to invert by including it in

if (this.props.preserveRasters) { this.css += 'img:not([src*=".svg"]), video, [style*="url("], [id*="banana"] { filter: invert(100%) }' }

though its kind of hacky. Trying to figure out how to exclude colour variables would be ideal in my situation. Will update again if i find more ways to do.