Help with dark mode and header/footer; issue using brand colors

[jspv]

Question

Modeling from discussions/2004 the following code works perfectly to toggle the header colors with dark mode:

from nicegui import app, ui


@ui.page("/")
def page():
    dark_mode = ui.dark_mode().bind_value(app.storage.user, "dark_mode")
    with ui.header(elevated=True).classes("bg-[#ffffff] dark:bg-[#121212]"):
        ui.button(icon="dark_mode", on_click=dark_mode.enable).props(
            "outline round"
        ).tooltip("Dark Mode").bind_visibility_from(dark_mode, "value", value=False)
        ui.button(icon="light_mode", on_click=dark_mode.disable).props(
            "outline round"
        ).tooltip("Light Mode").bind_visibility_from(dark_mode, "value", value=True)


ui.run(storage_secret="foo")

But the following does not:

from nicegui import app, ui


@ui.page("/")
def page():
    dark_mode = ui.dark_mode().bind_value(app.storage.user, "dark_mode")
    # with ui.header(elevated=True).classes("bg-[#ffffff] dark:bg-[#121212]"):
    with ui.header(elevated=True).classes("bg-secondary dark:bg-info"):
        ui.button(icon="dark_mode", on_click=dark_mode.enable).props(
            "outline round"
        ).tooltip("Dark Mode").bind_visibility_from(dark_mode, "value", value=False)
        ui.button(icon="light_mode", on_click=dark_mode.disable).props(
            "outline round"
        ).tooltip("Light Mode").bind_visibility_from(dark_mode, "value", value=True)


ui.run(storage_secret="foo")

Note the difference is using the brand colors as documented here. In this case using the color names, the dark: is ignored and the toggle doesn't change the header.

This seems like a bug - but maybe I'm missing something?

Also, trying to start in dark mode with ui.run(storage_secret="foo", dark=True) doesn't appear to do anything, which makes me think I'm missing something.

[falkoschindler]

Hi @jspv,

I think the problem is that colors like "secondary" and "info" are a Quasar concept, but the "dark:" prefix is define by Tailwind. Thus, there is no "dark:bg-info" class.

But you can use Quasar's color variables with Tailwind like this:

with ui.header(elevated=True).classes("bg-[var(--q-secondary)] dark:bg-[var(--q-info)]"):

[jspv]

Thanks, is this also the reason why ui.run(dark=True) is not working in my case, because that is setting the Quasar dark mode, but it's not seen by tailwind?

Also, what is odd is the non-dark setting of .classes("bg-secondary dark:bg-info") is working and I'm getting the bg-secondary color always, just not the dark mode color; so it appears to almost work using the quasar colors.

[falkoschindler]

ui.run(dark=True) activates dark mode globally. But on pages with ui.dark_mode(), dark mode is deactivated, because it defaults to value: bool = False. You can use ui.dark_mode(True) though.

The class "bg-secondary" works because Quasar defines such background color classes for "primary", "secondary" etc. But it doesn't define classes with "dark:" prefix.