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 #3926

Hope it helps somebody!

[github-actions]

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