Tailwind dark: prefix does not work

[smojef]

According to Tailwind documentation, we should be able to use classes such as dark:text-yellow, but it does not work.

import nicegui.ui as ui    
ui.label("TEST").classes('text-red dark:text-yellow')    
ui.run(dark=True)

This shows red text on dark background.
Did I missed something?

[falkoschindler]

Good question! Currently I have no idea why it doesn't work. 😕

[falkoschindler]

I just realized that we currently pass the dark argument of ui.run to Quasar only:

nicegui/nicegui/templates/index.html

Lines 147 to 148 in a23528a

	const dark = {{ dark }};
	Quasar.Dark.set(dark === None ? "auto" : dark);

Somehow we probably need to inform Tailwind about the mode we are in.

[falkoschindler]

And I noticed that text-yellow is not a Tailwind color. Something like text-yellow-400 should work better. But there seems to be more about it.

[falkoschindler]

Another step forward: Your default color text-red is also not a Tailwind class but from Quasar. It's overriding Tailwind classes (probably due to the order of importing the libraries in index.html). So to make dark: work, use Tailwind colors only:

ui.label('TEST').classes('text-red-400 dark:text-yellow-400')

But: This only considers the current system settings, not the dark argument in ui.run. For dark=None it works as expected, but dark=True is ignored by the dark: color.

[falkoschindler]

I think I found a solution in 0093bfd. This adds the preferred mode (given via ui.run or ui.page) to the Tailwind configuration.

@smojef Would you like to try it out?

[smojef]

I added ui.label('TEST').classes('text-red-400 dark:text-yellow-400') under ui.label('World') of my Hello world example #339.

• With version 1.1.5 the label was always red
• With the latest github version:
  • The label is yellow if started with dark=True. (OK)
  • The label is red if started with dark=False. (OK)

But the label did not change when I flip my Dark switch. So looking at your changes, I edited my on_dark as follows:

async def on_dark(event):
    # HACK: Is that the proper way of switching dark mode?
    js = '''
        const dark = {value};
        Quasar.Dark.set(dark === None ? "auto" : dark);
        if (dark !== None) tailwind.config.darkMode = "class";
        document.body.classList.remove("dark");    
        if (dark === True) document.body.classList.add("dark");
        Quasar.Dark.isActive;
        '''.replace('{value}', str(bool(event.value)))  # .lower() is not required?
    ret = await ui.run_javascript(js, respond=True) 
    info.log.push(f"Dark mode set to {ret}")

And then everything seems to work.

Perhaps the dark mode switching could be encapsulated in a JS function for reuse instead? And then, even better, exposed in nicegui API ;-)