switch colour not working

[Smug246]

Description

ye this is really weird basically the props function is having no effect on the ui.switch but it is working for other things.

Code:

tools = ui.tab('Tools', icon='construction') \
    .style('height: 55px; margin-top: 7px; border-radius: 10px; margin-left: 2px; width: 180px; padding-left: 35px; padding-right: 35px;') \
    .classes('justify-start')

with ui.tab_panel(tools).style('height: calc(100vh - 32px);'):
    ui.label('Password Generator').style('display: flex; justify-content: center; font-size: 32px;')
    with ui.card().style('margin-top: 15px;'):
        with ui.row():
            with ui.column().style('width: 15vh'):
                ui.label('Password Length').style('margin-left: 10px; margin-top: 20px; font-size: 20px; width: 175px;')
                with ui.element('div').style('display: flex; align-items: center;'):
                    length = ui.number(min=1, max=50, value=12).style('margin-left: 10px; width: 30px;').props('color="green-400"')
                    slider = ui.slider(min=1, max=50, value=12).style(f'margin-left: 10px; width: 150px;').props('color="green-400"')
                    slider.bind_value_to(length, 'value')
                    length.bind_value_to(slider, 'value')

            with ui.column().style('margin-left: 150px;'):
                easy_say_opt = ui.switch('Easy To Say').props('color="green-400" keep-color')
                easy_read_opt = ui.switch('Easy To Read').props('color="green-400" keep-color')
                all_chars_opt = ui.switch('All Characters').props('color="green-400" keep-color')

It wont work, however when i do it separately in a test file:

I genuinley dont know what im doing wrong. is it an inheritance issue from somewhere or something like that.

[falkoschindler]

The problem is that "green-400" is a Tailwind color and not from the Quasar color palette. The details, why the Tailwind color works in light mode, are a bit more complicated. But Quasar basically assumes the color should be #fff. That's in line with the QToggle documentation, which requires the "color" prop to be a name from the Quasar Color Palette.

[Smug246]

ok im still a little confused is there no way i can make it this colour: #1ed760 or do i just have to pick something as close as i can to that

[falkoschindler]

Honestly, I don't know. Maybe ui.add_head_html with some custom CSS might help? But I couldn't figure it out yet.

[Smug246]

ok no problem ill look into more and let you know if i find anything. ill close this for now