Multiple color scheme theme

[xphstos]

Hi all!

Love the work you guys did with vanilla-extract!
I just have a hick-up that I can't get over...
Let me get straight to the point.

In the project I'm working on we have 7 color schemes and each one has a dark and a light option.

Let's assume that we have 3 components.
A WrapperDiv, a Card and a Button.

The wrapper div changes it's background color based on the color scheme and light/dark mode selected.
This could easily be solved with styleVariants.

The card component does the exact same thing as wrapper div but also has some more complex styling options based on conditionals like being active etc.
This one, since it has more complex logic behind it's styling it should be a recipe right?

The button component has the same complex styling as the card and furthermore it can be included inside the card or be somewhere else.
Again, due to the complexity of it's needed styling I turned into recipe again but his time I need some extra styles based on it's parent component - in our case the Card component.
See where I'm going with this?

Let's assume we have that markup.

// ..inside WrapperDiv.tsx component

export const WrapperDiv = (theme) => {
return (
  <div className={wrapperStyles[theme]}>
    <Card color={theme} active={true} />
    <Card color={theme} active={true} />
    <Card color={theme} active={false} />
  </div>
)}


// ..inside Card.tsx component
export const Card = ({active, theme}) => {
return (
  <div className={cardStyles({ color: theme, active })}>
    {/* ...more markup inside card*/}
    <Button color={theme}>
      Click Me
    </Button>
  </div>
)}


// ..inside Button.tsx component
export const Button = ({theme, children}) => {
return (
  <button className={buttonStyles({ color: theme })}>
   {children}
  </button>
)}

If I could solve that with complex selectors that would be nice but I had no luck while trying.
Apparently this isn't working

selectors: {
   [`${parentRecipe({ color: "green"  })} > &`]: { ... }
}

So my only solution for now is to prop-drill the theme value.
Is there any better way to tackle this issue?

[askoufis]

IMO you should learn more heavily into Vanilla Extract's themes and CSS variables. styleVariants makes sense when you have certain props that map to certain styles. You could use this to map over all your themes and define colors, but then you'd have to prop-drill your theme name, which as you mentioned isn't ideal.

Recipe can be a good option too for more complex components, but again, using the theme name as a prop isn't great. Leaning more heavily into Vanilla Extract's theming API would be the best way to do this IMO.

You can set your theme class at the root of your app and then use the vars returned from createTheme inside your styles such that you don't need to worry about passing your theme name to each component, you just rely on CSS variables to do the work. For example:

// contract.css.ts
import { createThemeContract } from '@vanilla-extract/css';

export const vars = createThemeContract({
  color: {
    // You don't have to have separate colors for light and dark, this is just one potential option
    primary: '',
    primaryDark: '',
    secondary: '',
    secondaryDark: '',
  },
});

// greenTheme.css.ts
import { createTheme } from '@vanilla-extract/css';
import { vars } from './contract.css.ts';

export const greenTheme = createTheme(vars, {
  color: {
    // put your actual colors here
    primary: '#',
    primaryDark: '#',
    secondary: '#',
    secondaryDark: '#',
  },
})

// etc. for red, blue...
// Button.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './contract.css';

// This still will work with any theme defined with the `vars` contract
export const buttonStyle = style({
  color: vars.primary,
  '@media': {
    '(prefers-color-scheme: dark)': {
      color: vars.primaryDark,
    }
  }
});

// Button.tsx
import { buttonStyle } from './Button.css';

export const Button = () =>
  <button className={buttonStyle}>Click me</button>

Hope that helps.