Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
lts20050703 opened this issue Oct 28, 2024 · 3 comments
Closed

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

lts20050703 opened this issue Oct 28, 2024 · 3 comments
Assignees
@saadeghi

Comments

@lts20050703
Copy link

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,

daisyui/src/theming/functions.js

Line 214 in dfec9ea

// inject themes in order
needs to inject prefers-color-scheme: dark before injecting the root theme.
@github-actions GitHub Actions
Copy link

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 saadeghi self-assigned this Oct 28, 2024
@saadeghi
Copy link
Owner

You choose the order.
Change it to

@plugin "[email protected]" {
	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.

@lts20050703
Copy link
Author

For anyone who got here, just want to say that swapping themes: dark, light to themes: light, dark isn't enough, you also have to move the dark style above the light style, something like this :)

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@saadeghi saadeghi

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @lts20050703