search

crswll / tailwindcss-theme-swapper

A helper for getting tailwind values into css custom properties and switching them between media queries and classes. You can try it out here: https://play.tailwindcss.com/Gt21fePNvv
320 stars 15 forks source link

Theme doesn’t get applied to programmatic popovers #43

Closed heymartinadams closed 1 year ago

heymartinadams commented 1 year ago

Hi there ☺️

For some reason, tailwindcss-theme-swapper doesn’t seem to be applying the theme on popovers that are created programmatically (for example, a datetime picker popover).

In the DOM, the popover creates a new component that lives outside NextJS’ <div id="_next">. CleanShot 2023-10-25 at 11 53 37@2x

Even if I wrap the component in my theme... CleanShot 2023-10-25 at 11 55 12@2x

...it doesn’t apply to the popover. CleanShot 2023-10-25 at 11 55 44@2x

How can this be fixed?

crswll commented 1 year ago

Tailwind CSS can't see a classname like theme_${foo}_${bar}. If you replace that with something hardcoded it should work. You can also consider applying the class that sets the theme on <body> or <html> so it'll scope the portals as well. If I'm still missing a reproduction where I can see more code can help.

heymartinadams commented 1 year ago

I figured it out by adding this class via a useEffect:

useEffect(() => {
  document.body.classList.add(`theme_${appTheme?.brand}_${appTheme?.tint}`)
}, [appTheme])

Many thanks ✨