bug: DaisyUI 5: `<html data-theme="light">` doesn't work when there's `prefersdark: true;`

lts20050703 commented 3 weeks ago

What version of daisyUI are you using?

5.0.0-alpha.29

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/pFadUDJMTg

Describe your issue

<html data-theme="light"> doesn't work when there's prefersdark: true;

app.css

@import "tailwindcss";

@plugin "daisyui" {
    themes: light, dark;
}

@plugin "daisyui/theme" {
    name: "light";
    default: true;
}

@plugin "daisyui/theme" {
    name: "dark";
    prefersdark: true;
}

Strangely, <html data-theme="dark"> still works when there's prefersdark: true;.

I checked the generated CSS and found that prefers-color-scheme: dark is after [data-theme="light"]. This makes it impossible for [data-theme="light"] to override prefers-color-scheme: dark.

data-theme="dark" still works because it's after prefers-color-scheme: dark, therefore able to override prefers-color-scheme: dark.

TL;DR: Current generated CSS order:

Root theme
prefers-color-scheme: dark
Other themes

Fixing this should be a simple reorder to

prefers-color-scheme: dark
Root theme
Other themes

In other words, https://github.com/saadeghi/daisyui/blob/dfec9ea0f91552ff348b1e7dc0c26432ae2064d3/src/theming/functions.js#L214 needs to inject prefers-color-scheme: dark before injecting the root theme.

github-actions[bot] commented 3 weeks ago

Thank you @lts20050703 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented 3 weeks ago

You choose the order.
Change it to

@plugin "daisyui@5.0.0-alpha.29" {
    themes: dark, light;
}

and dark comes first in CSS.

Also, you can't change <html> tag in Tailwind Play. It will be ignored by Tailwind Play.

Thanks for testing daisyUI alpha 💚 and let me know if you have a question.

saadeghi / daisyui