Add a class to the style element when dark contrast is enabled

[brendon]

This allows us to further style descendants of this element taking into account the reversed contrast.

In my case I was setting the background colour on a div that contained links and other elements. Having a class set on the styleElement meant that I could target these descendant elements and change their colour when the contrast was defined as ‘dark’.

[EastDesire]

Sorry for the LONG delay @brendon. It's only now I can look into pull requests.

It was a good suggestion at the time you posted it, 4 years ago. The new version 2.2 doesn't invert any colors on styleElement (previewElement), but it offers isLight() method, so the same can be now quite easily accomplished this way

<input value="#0CF"
    data-jscolor="{previewElement:'#pr1'}"
    onInput="document.querySelector('#pr1').classList[this.jscolor.isLight()?'add':'remove']('jscolor-light');">

<em id="pr1" style="display:inline-block; padding:1em;">previewElement</em>

The code adds jscolor-light class to previewElement if the chosen color is light.

[brendon]

Thanks @EastDesire :) I appreciate your perseverance! :D

I'm currently running on a fork of your project that merged this in, but will look into this when I go to upgrade all my javascripts in the future.

All the best :D

[brendon]

Actually, I decided to switch back. It worked out very well. The only note was that I had to trigger an 'input' after initialising the JSColor input in order to set the correct colour and text classes on the preview element.

Thanks again :)

[EastDesire]

Glad to hear that. Yes, the input event, I forgot to mention it. You can also do it, if you already haven't, by calling jscolor.trigger('input') anywhere on the page - it will trigger the input event on all pickers once jscolor is ready.

[brendon]

Thanks @EastDesire, that's exactly what I did :) Works well :D