Theme API per component

[goatyeahh]

After exploring the current alpha API I wonder if there is/will be a way to apply theme on a per component bases?

For example removing the border and changing the background color for a CardComponent in dark mode without changing every component that shares the tokens. Is this a limitation or maybe there is a clever variation/theme/utils combination that allows this (e.g. changing variation based on the theme)?

[peduarte]

Hi! I dont know if you're aware, but we've been working hard for the last few months on Stitches Beta. It contains a lot of improvements over the Alpha version.

This is the WIP Migration Guide if you're adventurous https://stitches-site-git-beta.modulz-deploys.com/blog/migrating-from-alpha-to-beta

It supports a bunch of new powerful concepts, like "Token referencing", "Locally scoped tokens" and the ability to change styles on a theme basis, since you can now define the class name upfront.

For example removing the border and changing the background color for a CardComponent in dark mode without changing every component that shares the tokens.

I think there are a few ways you can go about this. This is one of them

// Create Stitches
const {styled, theme } = createCss({})

// Create dark theme
// - define a classname
// - override tokens
const darkTheme = theme('dark-theme', {})

const Card = styled('div', {
  // styles for default theme 
  backgroundColor: 'white',
  border: '1px solid black',

  // specific styles for dark theme
  '.dark-theme &': {
    backgroundColor: 'transparent',
    borderColor: 'transparent'
  }
})

Let me know if the below solves your problem