[BUG] - "--color" variables used inside shadow-dom - do not change at run-time.

[danielyogel]

HeroUI Version

3.0.4

Describe the bug

Hero-UI works mostly good inside a chrome-extension's ShadowDOM, had to fix simple issues regarding Document element.

Last thing which is not perfect:

While classes like "bg-background" change in runtime when toggleing "dark mode" (this classes use "--background" style variables), internal Hero BEM classes use the "--color-background" style colors which stay static when toggeling dark mode inside shadow-dom.

This breaks HeroUI's components that use "--color-default" variables (and not "--default")

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Try to implement a dark-light mode inside a ShadowDOM with HeroUI.

Expected behavior

--background AND --color-background variables should change in runtime inside ShadowDOM.

Screenshots or Videos

No response

Operating System Version

MacOC

Browser

Chrome

[mrbadri]

@danielyogel Thanks for reporting this. I've submitted a fix in PR #6646.

Feel free to take a look at the PR for the implementation details. It's currently pending review.