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.