A demo of automatic text color selection based on the background color for NiceGUI

demo_auto_color_nicegui_button.py

import re
from typing import Optional, Callable, Any, Tuple

from nicegui import ui
from nicegui.colors import set_background_color, set_text_color
from nicegui.elements.button import Button


def get_rgb(hex_color: str) -> Tuple[int, int, int]:
    """ 6 or 8 characters supported """
    match = re.match(r'^#?.{0,2}([a-zA-Z0-9]{6})$', hex_color)
    if match:
        hex_color = match.group(1)
    else:
        raise ValueError('not a valid hex color')

    r, g, b = tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4))

    return r, g, b


def get_brightness(rgb: Tuple[int, int, int]) -> int:
    """ http://www.w3.org/TR/AERT#color-contrast """
    brightness = round(((int(rgb[0]) * 299) +
                        (int(rgb[1]) * 587) +
                        (int(rgb[2]) * 114)) / 1000)
    return brightness


def get_text_color(brightness: int) -> str:
    return 'black' if brightness > 125 else 'white'


def text_color_from_bg_color(bg_color: str):
    return get_text_color(
        get_brightness(
            get_rgb(bg_color)
        ))


class AutoTextColorButton(Button):

    def __init__(self,
                 text: str = '', *,
                 on_click: Optional[Callable[..., Any]] = None,
                 color: Optional[str] = 'primary',
                 ) -> None:

        super().__init__(text=text, on_click=on_click, color='#000000')
        set_background_color(self, color)  # doesn't work unless I set hex based color on super().__init__
        set_text_color(self, text_color_from_bg_color(color))


AutoTextColorButton('text', color='#6a2185')
AutoTextColorButton('text', color='#FF61E5')
AutoTextColorButton('text', color='#EDFF46')
AutoTextColorButton('text', color='#0D5410')

ui.run(native=True)

demo_auto_color_on_click.py

import re
from random import choices
from typing import Tuple

from nicegui import ui


def get_rgb(hex_color: str) -> Tuple[int, int, int]:
    match = re.match(r'^#?.{0,2}([a-zA-Z0-9]{6})$', hex_color)
    if match:
        hex_color = match.group(1)
    else:
        raise ValueError('not a valid hex color')

    r, g, b = tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4))

    return r, g, b


def get_brightness(rgb: Tuple[int, int, int]) -> int:
    """ http://www.w3.org/TR/AERT#color-contrast """
    brightness = round(((int(rgb[0]) * 299) +
                        (int(rgb[1]) * 587) +
                        (int(rgb[2]) * 114)) / 1000)
    return brightness


def get_text_color(brightness: int) -> str:
    return 'black' if brightness > 125 else 'white'


but = ui.button('A text', color='#000000')
label = ui.label('The color')


def click_handle():
    random_bg_color = '#'+''.join(choices('0123456789abcdef', k=6))
    label.text = random_bg_color

    but.style(f'background-color:{random_bg_color}')
    but.style(f'color:{get_text_color(get_brightness(get_rgb(random_bg_color)))}')


but.on('click', click_handle)

ui.run(native=True)