How to decide show which component based on dark mode statu?

[weinibuliu]

Question

Hi everyone.

I try to show diffrent images in diffrent darkmode.I try to use ui.darkmode({None | bool}).value that will return None or bool.bool is OK,but None isn't.

None means use system setting.When system use dark,Nicegui will use dark,too.
However,ui.dark_mode(...).value still return None.I can't know which image should be showed(Light ver or Dark ver),becuase I don't know the darkmode statu.

Is there any way to slove this problem?

[falkoschindler]

Hi @weinibuliu,

There's discussion #2415 about how to get the user preference when dark mode is set to None.
Apart from that, you can use Tailwind's dark: variant to show and hide elements based on whether dark mode is active.

[weinibuliu]

Thanks very much for your answer.

I have been trying to achieve this effect using Tailwind's dark: variant for the past few days. Unfortunately, I have not made any progress as I know very little about Tailwind and CSS. Is there an existing example that I can refer to?

Thanks again.

[falkoschindler]

Here is how you can show and hide elements based on the current mode:

ui.icon('light_mode').classes('dark:hidden')
ui.icon('dark_mode').classes('hidden dark:!block')

The class "dark:!block" will display the element as a normal "block" only in dark mode. Otherwise the element is hidden. The exclamation mark ! is needed to overrule the "hidden" class.

Alternatively you can create your own classes with some custom CSS, which might be more handy:

ui.add_css('''
@media (prefers-color-scheme: dark) {
    .only-in-light-mode {
        display: none;
    }
}
@media (prefers-color-scheme: light) {
    .only-in-dark-mode {
        display: none;
    }
}
''')

ui.icon('light_mode').classes('only-in-light-mode')
ui.icon('dark_mode').classes('only-in-dark-mode')

[weinibuliu]

Thanks for your answer.It is very useful.

But I encountered a similar problem as #3753 .Below is my code

from pathlib import Path

from nicegui import ui


GITUHB_IMG_PATH = Path(Path.cwd(), "github.png")
GITUHB_WHITE_IMG_PATH = Path(Path.cwd(), "github_white.png")

def build():
    with ui.column(align_items="center").classes("w-full"):
        dark_toggole = ui.toggle(
            {None: "None", False: "False", True: "True"}, value=None
        )

        with ui.row(align_items="center").classes("w-full"):
            (
                ui.image(GITUHB_IMG_PATH) # light_icon
                .props(f"width=80px height=80px")
                .classes("dark:hidden")
            )
            (
                ui.image(GITUHB_WHITE_IMG_PATH) # dark_icon
                .props(f"width=80px height=80px")
                .classes("hidden dark:!block")
            )

    def on_dark_change():
        ui.dark_mode(dark_toggole.value)

    dark_toggole.on_value_change(on_dark_change)


build()
ui.run(dark=None)

When dark mode is switched between True and False, it behaves normally.But when dark mode is switched from None to True, the layout is messed up and the CSS has no effect.The light_icon will display and the dark_icon will hide.Is there a way to fix this?

Anyway,thanks for your answer again.

[falkoschindler]

You're creating more and more ui.dark_mode elements. Instead you should re-use a single one per page:

dark_mode = ui.dark_mode()
ui.switch('dark mode', on_change=lambda e: dark_mode.set_value(e.value)).props('toggle-indeterminate')

Or via binding:

dark_mode = ui.dark_mode()
ui.switch('dark mode').bind_value_to(dark_mode).props('toggle-indeterminate')

[weinibuliu]

Thanks.Now I fix this.However,problem is still existed.

When True <-> False:

When None <-> True

I use ui.toggle() insetad of ui.switch(),becuase I hope users can set value as None to follow system settings and they can change this at anytime.

[falkoschindler]

Oh, I see. Since NiceGUI 2.7.0 there should be a warning about using ui.dark_mode() in combination with ui.run(..., dark=None):

ui.dark_mode is not supported on pages with dark=None while running with tailwind=True (the default). See #3753 for more information.

Unfortunately this problem is still unresolved. But removing dark=None should be a simple workaround.