Need help with Dark Mode and Dynamic UI Element Colors

[wurstcasesenario]

Question

I am currently facing an issue regarding the implementation of a dark mode. I have tried using "ui.dark_mode", but I couldn't find a way to specify the objects color in dark mode. For example, I want a ui.button that's red in light mode but blue in dark mode. I would like to know if there is a way to assign two colors to a "ui.button" element that can change dynamically when switching between light and dark modes.

[vickorian]

if you create a function that's refreshable you can redraw the color of a button based on the state as long as you call the refreshable function when the state is updated. So if you had a darkmode switch you could call a function with a callback with "ui.switch().on_value_change(function_to_run())"

and in function_to_run you can change the state of darkmode and then call the refreshable function that creates your button with "button_function.refresh(callback)" In the button function, you check the darkmode state and then select the color. So something simple would be like

@ui.refreshable
async def button_funtion(callback):
    if app.storage.user['mode'] == "Dark":
        color = "Green"
    else:
        color= "Blue"
    ui.button(label="this is a button").style(f"color: {color}").on_click(callback)

You could pass the callback function you desire in the refresh, but you might need to tinker with this to get it to work correctly.

You could also try it with creating your own class, and when someone changes dark mode, you refresh the whole page to redraw everything on it and have the class read if the page is in darkmode or not. This would preserve the functionality of the button while allowing some dynamic action in color.

[falkoschindler]

You can use Tailwind's "dark" prefix to switch classes based on dark mode:

ui.label('Label').classes('bg-red-400 dark:bg-blue-400')

For buttons, however, it doesn't seem to work like this. But there's a way to switch the "color" prop based on dark mode:

ui.button('Button').props(''':color="Quasar.Dark.isActive ? 'blue' : 'red'"''')

[jakechevrier]

for buttons it'd be awesome if we could get a color_dark arg similar to the color arg that takes care of the funky props you have above...

example:
ui.button('Label', color='red', color_dark='blue')