bug: using custom theme, --root-bg does not match --color-base-100 – causes weird modal overlay

[yumhum]

Reproduction URL (Required)

https://play.tailwindcss.com/NTn5EpW5FB

What version of daisyUI are you using?

v5.0.23

Which browsers are you seeing the problem on?

All browsers

Describe your issue

I am using custom daisyui theme.

Added modal in my project and noticed weird colors at overlay.

After some digging i found that --root-bg contains 2 variables. The second one was color-base-100 however the first one caused the issue.

The solution was to add into my theme css line: --root-bg: the same color set up in --color-base-100.

At first i thought it is issue with my framework (using Nuxt 3) so originally i posted about it in discussion. More details and description and screenshots are there https://github.com/saadeghi/daisyui/discussions/3926

Hope it helps somebody!

[github-actions[bot]]

Thank you @yumhum 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]

Hey, what's the issue?
I'm not seeing any problem in the link you sent 😅

[yumhum]

hey, sorry my bad. I described it in the linked discussion, in Tailwind play it works well so not much to see there.

The issue is with this --root-bg: This is form my project, it seems like the data-theme is active?

Meanwhile in TW play the root is active and it works correctly.

How i got there, im not really sure :D

Anyway, when the latter case (data-theme), the --root-bg caused problems with overlay, see the screenshot:

I've overwritten the --root-bg in my custom theme and it works now correctly:

[yumhum]

ok i think the problem is this:

• i have had set up data-theme"name-of-theme" (in such case the --root-bg must be overwritten)
• if i delete the data-theme and just in my CSS file use :root { theme classes }, it works fine (no need to overwrite the --root-bg class)

So while using data-theme with some custom theme, it causes the issue

[twoends]

@saadeghi Having the same problem. You can see the issue even in the base tailwindplay: Untouched TP. Just look at the buttons background. It happens with modal and drawer overlays (my tests til now)

[pdanpdan]

Can you please check this: https://play.tailwindcss.com/3GGInyhxHF?file=css Is this what you expected?

Updated example: https://play.tailwindcss.com/ja1FJhJZt8?file=css @saadeghi How hard is it to add a default --root-bg: var(--color-base-100); to all themes? If it can be done I think we can simplify some CSSs Because else the --root-bg set in a theme will propagate to all themes on child elements.

I think I found a solution: https://play.tailwindcss.com/yD817nUcol?file=css See #4181

[saadeghi]

@saadeghi How hard is it to add a default --root-bg: var(--color-base-100); to all themes?

It's not hard but it would look bad.
Developers are directly in control of themes.
It would be inconvenient to ask them to add this line which is basically a fix, not a declaration.

[pdanpdan]

Solved already :) No need to change the themes in any way