Feature request: Combined use of light and dark themes

[sjdalessandro]

I want to combine the use of light and dark themes so that some components stand out.

The idea is that with code like this:

    <div
    	role="alert"
    	className="alert alert-vertical sm:alert-horizontal bg-base-100 border-none"
    	data-theme='contrast'
    >
    [...]
    </div>

The alert would use the dark theme if the light theme is selected, or vice versa.

For now, I've achieved it like this:

@import "tailwindcss";
@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
}

@media not (prefers-color-scheme: dark) {
	:root:not([data-theme]) [data-theme=contrast] {
		/* ...all the dark theme CSS variables */
	}
}

:root[data-theme=light] [data-theme=contrast] {
		/* ...all the dark theme CSS variables */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) [data-theme=contrast],
	:root[data-theme=dark] [data-theme=contrast] {
		/* ...all the light theme CSS variables */
	}
}

But it's not very neat or general, in the sense that it doesn't allow you to define the contrast theme for other themes.

I think if we could add a flag and the name of the contrast theme to an enabled theme, its styling could be applied in pluginOptionsHandler.js.

This way, it would be optional; it wouldn't change anything for those who don't want to use it.

Do you know of an easier way to accomplish this without JavaScript?. I would like to know your opinion on this feature.

[saadeghi]

Thanks for the idea.
What's the use case for this?
Generally you wouldn't want large bright blocks of UI in a dark theme.

A cleaner way would be using bg-base-content text-base-100 so the colors will be inverted. But I wouldn't recommend doing this anyway.

[sjdalessandro]

I would use it to highlight small areas that provide important information to the user, such as pop-up alerts.

The idea came to me while reading the "Combining light and dark themes" subsection in the Custom application section of Material Design version 2. In the Android documentation for the Snackbar component, you can see a screenshot with an example for each theme. However, in version 3, it is recommended to invert the colors.

In the screenshot below, you can see the alerts with inverted colors in the first column, with the contrast theme in the second, and with the fill colors in the third, as described in the documentation.

Personally, I find the inverted colors a bit dark and make it difficult to see the icons. And while both the inverted theme alerts and the fill color alerts are bright, and I think they should be, the alerts with the contrast theme are more attractive to me.

Of course, this is all subjective, and if there is no interest from anyone other than myself, I think it is not advisable to add the feature.