Change color_input button background to match selected color

[adosikas]

I find it extremely useful to color the button of color inputs in the matching color (and setting the icon color to either white or black depending on how dark the color is).

I would assume making this an option or even the default behavior could be very helpful as it allows a preview of the color without having to open the picker.

class ColorableColorInput(ui.color_input):
    def on_value_change(self, value: Any) -> None:
        super().on_value_change(value)
        contrast_color = "white" if _check_if_dark(value) else "black"
        self.button.style(f"background-color:{value or 'white'}!important; color:{contrast_color}!important")

[rodja]

Cool! I think it should be a parameter: ui.color_picker(preview=True). I'm also in favour of making the default True. Would you like to create a pull request for this? See CONTRIBUTING.md for a short explanation.

[falkoschindler]

Oh yes, the automatic adjustment of the foreground color is a tricky subject. But maybe we can use something like https://github.com/ubernostrum/webcolors or simply the list of CSS color names https://github.com/ubernostrum/webcolors/blob/trunk/src/webcolors/constants.py.

[adosikas]

A workaround to the whole contrast thing would be just adding a border around the icon.

[falkoschindler]

Great idea, @adosikas! Do you have an idea in mind how to implement that?

[markospy]

In css there are some properties for it, such as filter:drop-shadow and filter:text-shadow

[adosikas]

I just used multiple text-shadow . See #1473

[falkoschindler]

This feature has been released in version 1.3.12.