Class for automatic light/dark mode contrast color

[JohanAR]

A lot of elements automatically switch to a contrasting colour, i.e. white on dark mode and black for light. It would be nice if there was a pre-made class which I could use to get the same behaviour, e.g. on a flat button.

[falkoschindler]

Hi @JohanAR, how would you use such a class? Can you sketch an API?

[JohanAR]

I was thinking that since there are classes like "text-red" or "bg-green", it would be convenient if there was one which adapted to dark mode. E.g. ui.label('test').props('flat').classes('text-contrast')

Funnily enough, ui.button('x', color='contrast').props('flat') already works since any invalid color name appears to do this with flat buttons :)

[falkoschindler]

Oh, I see! I was thinking about Python classes... Something like Tailwind's or Quasar's color classes makes sense. 👍🏻

[JohanAR]

Ah, of course, I didn't think about the ambiguity :)