Code Splitting Themes

[IAmNatch]

Does Panda have the ability to support code splitting themes, similar to how one can achieve this in vanilla-extract?

This is useful for sites with many themes, allowing users to avoid downloading every theme at once. Since theme tokens are just CSS variables, this is achieved by splitting the css variable files by theme and importing the required theme dynamically.

Example

  const dynamicTheme = "theme-a";
  const { themeClass } = await import(
    `@/theme/${dynamicTheme}.css`
  );

[astahmer]

I think you could use recipes for that, use a bunch of CSS variable and then replace them at runtime with assignInlineVars
made a PoC here https://play.panda-css.com/TkiN7P8XZg

[IAmNatch]

This is really cool, thanks for taking the time to write this example up!