Is it possible to use dynamic themes?

[bartekczyz]

Hello :) My project is getting bigger and bigger and I'm investigating which library I should use instead of CSS modules.

Panda looks impressive, but I'm not sure if it covers my use case: I want to have a tiny external style that defines some tokens like colors. The thing is, some of the customers might define their own set of colors, so it can't be done in the build time. What is the best approach to tackle this problem?

I was thinking of rendering a <style> with --color-brand: #f0f; and some more variables, but I'm also not sure if that's the right approach

Thanks in advance!

[anubra266]

@bartekczyz if you want to define anything not at buildtime, use the style jsx attribute

[bartekczyz]

With all due respect @anubra266, using the style prop is a wrong solution on many levels, you should only use it when you have no other choice (like setting the width in px dynamically, or item's position, idk).

Maybe I described my problem wrong, so let me rephrase it: the only thing I want to override are the colors and I want to do it in runtime because at build time I don't know the values

[anubra266]

@bartekczyz Panda is unable to resolve any runtime values because it works by static extraction.
Details here https://panda-css.com/docs/guides/dynamic-styling
Also I'm not aware of any drawbacks of using the style jsx attribute.

[bartekczyz]

Ok, I think I've found a solution https://nextjs.org/blog/styling-next-with-styled-jsx thanks @anubra266 for pointing me in that direction! :)

[astahmer]

the only thing I want to override are the colors and I want to do it in runtime because at build time I don't know the values

fwiw, using the style attribute to override the CSS variables for those colors seems like a perfect fit

[varghesethomase]

@bartekczyz you could use globalStyles to define styles globally. If you need to bring in multi theming, it can be also facilitated. This document explains it.