ui.chip textcolor stays black on dark background

[tjmuenster]

Description

Hello everybody,

thanks for the amazing framework and the huge steps in the recent months!

With the following code, I've stumpled across an problem with the textcolor of the ui.chip element.

from nicegui import ui

#The color does not matter. It's main purpose is being dark
ui.colors(primary='#002d55')

with ui.header(elevated=False).classes('text-xl'):
        ui.label('label font-bold').classes('font-bold')
        ui.chip('chip text-bold').classes('text-bold')
        ui.chip('icon chip',icon='person')
        ui.icon('person')

ui.chip(text='chip')

ui.chip('chip font-bold').classes(add='font-bold')

ui.chip('chip text-bold').classes(add='text-bold')

ui.chip('chip text-xl').classes(add='text-xl')

ui.chip('icon',icon='person')

ui.label('Text label')

ui.run()

The two elements ui.label and ui.icon inside ui.header are correctly displayed with white textcolor, while the two ui.chip-elements are not. First I thought, tailwind and quasar are not working together. But as you can see with the other ui.chip-elements, its apparently not.

Even more interessting is, that when you disable the color property of .q-chip in your average webbrowser, the ui.chip-elements inside the header do change their textcolor (see attached screenshots), while the other do not.

Am I missing something? Thanks in advance for your help and time!

[falkoschindler]

Hi @tjmuenster,

If I understand correctly, you'd expect the text color of ui.chip to depend on the background color of the parent element like ui.header? I'd argue that it should depend on its own background color instead. But at the moment ui.chip doesn't adjust its text color based on its background color. You can do that explicitly using the "dark" prop:

ui.colors(primary='#002d55')

with ui.header():
    ui.label('Label')
    ui.chip('Chip').props('dark')

ui.label('Label')
ui.chip('Chip').props('dark')

[tjmuenster]

Hello @falkoschindler ,

I was adding ui.chip to the header to see, if its text color would change based on its parent element, like ui.label or ui.icon do.

I completly agree with you, that the text color of ui.chip should depend on its own background color.