Where and how can I define the primary and secondary colors?

Question

I'm currently testing NiceGUI and it lokks like it will be my favorite GUI framework for Python. I'm an absolute newbie with FastAPI, Vue and Tailwind (I'm coming from PyQT)...

I understood that I can style the elements with classes() and use Tailwind-Classes for this purpose. But color-changes have no effect on buttons.

I think, it has to do with primary colors (the website of NiceGUI states: "customize look by defining primary, secondary and accent colors").

But where and how can I define the primary and secondary colors?

I tried to set Tailwind-Classes for a button.

Answer 1

Using ui.colors is often the preferred way to change the color of all elements. If you want to change the color of one individual button, you can use the Quasar prop "color". To use the "positive" color:

ui.button('Yes').props('color=positive')

For negative

ui.button('No').props('color=negative')

The prop also allows using any color from the Quasar color palette. Here is a short example with two UI elements which change the color of the button on the fly:

from nicegui import ui

with ui.card().classes('w-64').classes('items-stretch'):
    color = ui.select(['red', 'pink', 'purple', 'cyan'], on_change=lambda e: button.props(f'color={e.value}-5'))
    ui.slider(value=5, min=0, max=10, on_change=lambda e: button.props(f'color={color.value}-{e.value}'))
    button = ui.button('SOME BUTTON', on_click=lambda: ui.notify('button was pressed'))

ui.run()

Disclamer: I'm one of the developers of NiceGUI.

Answer 2

I found the solution in the examples of NiceGUI:

ui.colors(primary='#6E93D6', secondary='#53B689', accent='#111B1E', positive='#53B689')

You can find it also in the API reference of NiceGUI.