Always keep palette opacity to 1

[valentinbdv]

Is your feature request related to a problem? Please describe. It can become hard to see the color you choose when opacity is close to 0

Describe the solution you'd like Just keep the opacity of the palette to 1 or at least have an option to be able to do that. As we already see the result in the current color circle with opacity, this can be enough.

Describe alternatives you've considered It seems like most of the other color pickers also do not set opacity on the palette. I wanted to change it myself but it must come from the library. Tell me if I can help ;)

Additional context We use pickr for Naker and we love it. If you want to see how we use it: https://app.naker.io/back

[simonwep]

Hi :) Glad to see it used in naker! That's really cool 😊

Here you go, it's more like a hack but the related source-code wi'll probably never change so it'll be quite stable and save to use:

pickr.on('change', (color, instance) => {

    // We gonna need the dom-element "palette" later
    const {palette} = instance.getRoot().palette;

    // Pickr the current hue value
    const [h] = color.toHSVA();

    // Pickr will update the colors in the first frame, so we need to wait until everything got updated
    requestAnimationFrame(() => {

        // After pickr updated the colors we gonna apply our own without opacity
        // Corresponding source: https://github.com/Simonwep/pickr/blob/master/src/js/pickr.js#L250
        palette.style.background = `
            linear-gradient(to top, rgb(0, 0, 0), transparent),
            linear-gradient(to left, hsl(${h}, 100%, 50%), rgba(255, 255, 255))
        `;
    });

    console.log('change', color, instance);
});

Related source.

[valentinbdv]

It works like a charm! Thanks a lot ;)