Best way to allow theming a component-library styled with vanila-extract

[trm217]

If a made a component-library with vanilla-extract (for example in a mono-repo) and would like to use it in different packages, what would be the best way to theme the exported components?

Intuitively, I would probably just export the var object of the themeContracts that I used for styling within the components, however is this really all I can do?

Has anyone already attempted this? If so, what insights did you gain? (also in regards to advanced features like sprinkles etc)

[Perni1984]

@trm217 we are facing the same issue - would be happy to connect to share our findings. cc @npeham

[cforsyth68]

Did you figure this out? We have an NX repo with individual component libraries and also want our consumers to provide their own custom themes. This is proving difficult without us requiring our customers to use vanilla extract to createTheme and pass it to a theme context provider. We found we also could not use hash values for css and didn't want duplicate css in each library.

[kriffin]

Same here, i have to use my design-system in my app of my turborepo and in my storybook.

[askoufis]

I'd say the straightforward option is to just export the theme contract and let consumers do as they wish with the CSS variables. That could be creating their own themes with Vanilla Extract, or using other tools to create theme classes, either at build-time or run-time. CSS variables are a natural fit for theming, which is why Vanilla Extract's themes are built around them.

When it comes to sprinkles, as long as you're consuming your theme variables inside your sprinkles definitions, then custom consumer themes should work just fine.

@cforsyth68 You can create a global theme contract with un-hashed CSS variable names with createGlobalThemContract.