Could you add a bit more complex examples to the documentation?

[ucimo]

I really like this project, but I spend a day figuring out how to set up a themes and use them as conditions with sprinkles. Ended up doing something like this:

// sprinkles.css.ts
const colorModeProperties = defineProperties({
  conditions: {
    lightMode: {
      selector: `${lightColorMode} &`,
    },
    darkMode: {
      selector: `${darkColorMode} &`,
    },
  },
  defaultCondition: "lightMode",
  properties: {
    color: ve.colors,
    background: ve.colors,
  },
});

I'm setting these theme classes to the html tag and it's finally working, but It's probably not how it was meant to be done and it took a lot of time to get to this point.

Could you maybe add an examples page to your docs, at least for the common use cases? Thanks.

[airtonix]

Second this. my mouth breathing window linking peasant brain is struggling to see the optimal way to setup a way to do a basic dark/light mode setup that also uses the recipe tool.

The tutorial should show:

• a colour contract
• a spacing contract
• defining a dark colour theme
• defining a light colour theme
• exporting all the above as export cosnt tokens = magicalVanillaExtractTutorial(itsMagic)
• definining a global theme that defines spacing, fonts

It should then go onto making a component:

• box: defined by the recipe tool so we get auto props defined via: padding, border, borderRadius, margin, background, display, justifyContent, alignItems, flex and flexGrow. color and background should be influenced by tokens ☝🏻

Then define a provider that controls the apps dark/light mode

I think this comment is a good foundation for what most newcomers would be trying to achieve: #1012 (reply in thread)

[sctgraham]

Have you made any progress on this front or found any further resources ? I concur that this is sorely missing from the current docs.