Same component with differents theme

[loeck]

Hi !

Thank you for creating this library, it's been a long time since I had so much fun to create a Design System :)

I would like your opinion on something I am trying to do

I have a monorepo with multiples packages and applications, I have a theme package and in this package, I have different theme (like "marketing", "frontoffice", "backoffice"), my goal it's to have same "functionnal" components but with different theme.

Like have the possibility to have <Box /> component but with different theme

My goal it's to avoid to create 2 same components with just 2 different theme

Ex:

import { styled } from 'theme/marketing'

export const Box = styled('div', {
  boxSizing: 'border-box',
})

Box.displayName = 'Box'

import { styled } from 'theme/frontoffice'

export const Box = styled('div', {
  boxSizing: 'border-box',
})

Box.displayName = 'Box'

I was thinking of creating a Provider like styled-components to be able to give my theme on top of my application, but it looks overkill

So if you have a better idea !

Thanks a lot 🙏

[renatewr]

Hi! I am using stitches/core (not react), but I am setting the "theme" class outside of the component - so rather on the body element or a main div. Then each component's style will get the value from the css-variables for the theme on the page.

I.e className = {customThemeclassname}

It might be other solutions for stitches/react:)