bug: Customizing dark theme disables all default themes

[Freymaurer]

Reproduction URL (Required)

https://play.tailwindcss.com/1cErs5yhX9?file=css

What version of daisyUI are you using?

v5.0.40

Which browsers are you seeing the problem on?

Firefox, Other, Chrome, Edge

Describe your issue

I want to customize light and dark mode to use different primary, secondary and accents colors. Btoh should be settable by the user and use preferred color mode from browser if no data-theme is set.

So:

• data-theme="light" -> customized light
• no data-theme, preferred light -> customized light
• ...

I encountered the following issues.

1. If i customize the dark theme, without adding prefersdark: true. No date-theme with preferred browser mode dark will not apply my custom colors.
2. If i add prefersdark: true and have a browser with preferred color mode dark, then no default theme (like cupcake, light, synthwave, forest) can be applied anymore. But full custom themes can still be applied. This mean, using the theme generator to get the properties of the light theme and adding it with a different name works. But using data-theme="light" does not work.

I am not 100% sure if this is reproducable on tailwind play as the page currently returns an error on all tested browsers for me:

Below you can find the tailwind config i used, to test it i modified the data-theme attribute by hand.

@import "tailwindcss" prefix(swt);
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
    themes: all;
}


@plugin "daisyui/theme" {
    name: "dark";
    prefersdark: true;
    --color-primary: oklch(0.7305 0.13 177.47);
    --color-primary-content: oklch(0% 0 0);
    --color-secondary: oklch(0.3571 0.0384 250.36);
    --color-secondary-content: oklch(100% 0 0);
    --color-accent: oklch(0.8141 0.1041 124.06);
    --color-accent-content: oklch(0% 0 0);
}

Thanks for your time, i really appreciate the work.

[github-actions[bot]]

Thank you @Freymaurer 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.

[Freymaurer]

Tailwind play works again. Tried to reproduce it there and was unable to do so. 😞

[Freymaurer]

I did some more testing and found out that setting data-theme on any div inside the page works as expected (what you can see in the tailwind play), but if you go to inspect in tailwind play and set the data-theme attribute to light on a prefered dark browser. The first set of buttons will not turn to theme light

If you comment out the custom dark theme, then it will turn light.

[johanneszinkdmde]

I have a somewhat similar problem. We customized the primary and secondary colors for the "light" theme in daisyUi 4 and migrated to daisyUi 5 now.

The changed colors won't get applied to any browser if we don't set this in the theme: prefersdark: true;

This works on my chrome with dark mode preferred:

Config:

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default;
}

@plugin "daisyui/theme" {
  name: "light";
  prefersdark: true;
  --color-primary: "#002878";
  --color-secondary: "#8888a5";
}

Any combination of the preferences in the browser without the prefersdark won't work either.

[indcoder]

Same here. This is a regression when I upgraded from v3 to v5.

When the browser/OS setting is set to dark, the page displays the incorrect color profile(primary colors, secondary colors)

I verified this regression across all major browsers [Edge, Chrome, Firefox]

@import "tailwindcss";
@source "./**/*.{razor,html}";

@plugin "daisyui" {
    themes: light --default, dark --prefersdark;
    logs: true;
}
@plugin "daisyui/theme" {
    name: "light";
    default: true;  
    --color-primary: #facc15;
    --color-secondary: #003366;
    --color-success: #22c55e;
}

@plugin "daisyui/theme" {
    name: "dark";
    --color-primary: #facc15;
    --color-secondary: #ffffff;
    --color-success: #22c55e;
}

When OS browser setting is light and switched to dark :

When OS/browser setting is dark:

[saadeghi]

Hey
Can you try moving the dark theme above the light theme?

[indcoder]

Thank you for the super quick reply, @saadeghi. Unfortunately, no change in behaviour after moving the dark theme above the light theme. [Cleared the browser cache]

[saadeghi]

Can anyone share a Tailwind Play link with this issue?
The original link (https://play.tailwindcss.com/1cErs5yhX9?file=css) is working as expected.

[Freymaurer]

@saadeghi did you follow the instructions in this comment (https://github.com/saadeghi/daisyui/issues/3921#issuecomment-2921144325)? This issue only appears if the data-theme is set on <html>

See images in the same comment

[indcoder]

No, I don't have data-theme set on the html element. And this behaviour manifested by just upgrading to v5 from v3.

[twocaretcat]

@saadeghi I think this is a dupe of #3754 which has this reproduction:

Hi @saadeghi , thank you for making this awesome project. I am facing the same problem. Here is a reproduction project. Switch your computer theme to dark and open it; you will be unable to switch to the "light" theme.

https://codesandbox.io/p/devbox/rv2csf

update: I think I found the root cause. If I put the Theme A that preferesdark: true after the Theme B that preferesdark: false. Theme A will always override Theme B

Originally posted by @listennn08 in #3754

I've forked the repro to show that it's possible to work around this issue by:

1. placing the theme with prefersdark: true; first in config. (sandbox #1), or
2. setting data-theme attribute on body element instead of html (sandbox #2)

[dgkf]

Just chiming in to say that I encountered this issue as well using a set of custom themes.

From what I can tell, it's an issue with the generated css. The @media (prefers-color-scheme: dark) seems to have the same specificity as :root[data-theme="theme"], so the order of definition becomes important.

Anything that comes before the theme with prefersdark: true is placed after the media query css selector so the media query continues to take precedence.

@jerboa88's solution rearranges the order of the css so that the [data-theme="theme"] selector comes first in the specificity tie. Perhaps the media selector needs to make sure it's not applying the theme only in cases where the document already has a set theme.

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  }
}

[njs-guy]

Hey Can you try moving the dark theme above the light theme?

I was having a similar problem where setting "prefersdark" to true in the custom theme was forcing it to always be enabled. The default dark theme didn't have the same issue. This fixed it for me. I was going insane trying to figure out why it wasn't working but turns out it was that easy.

Thanks. You're a legend.

[saadeghi]

Fixed in 5.0.54
Thanks @dgkf for the suggestion 💚

[sillvva]

Fixed in 5.0.54 Thanks @dgkf for the suggestion 💚

This fix has broken my system theme. Now prefersdark: true does absolutely nothing.

I have these themes and when my root is set to data-theme="system" it is defaulting to light theme even though my system is in dark mode. If I add default: true to the black theme, it won't switch to light mode when my system switches to light mode.

@plugin "daisyui";

@plugin "daisyui/theme" {
	name: "black";
	default: false;
	prefersdark: true;
	color-scheme: dark;

	--color-primary: oklch(48.38% 0.2633 287.85);
	--color-secondary: oklch(72.67% 0.1872 308.45);
	--color-secondary-content: oklch(0% 0 0);
	--color-error: oklch(48% 0.1905 27.52);
	--color-error-content: oklch(100% 0 0);
	--color-warning: oklch(83.242% 0.139 82.95);
	--color-warning-content: oklch(0% 0 0);
	--radius-field: 0.5rem;
	--radius-box: 0.5rem;
	--radius-selector: 0.5rem;
}

@plugin "daisyui/theme" {
	name: "light";
	default: true;
	prefersdark: false;
	color-scheme: light;

	--color-primary: oklch(52.26% 0.2175 262.65);
	--color-secondary: oklch(56.59% 0.238 265.11);
	--color-accent: oklch(52.78% 0 0);
}

[sillvva]

Nevermind, I figured it out. I have to remove data-theme for a system theme.