Multiple apps with different themes

[benoitdeziel]

Hello! I'm investigating how to handle different themes with our design system. We have multiple apps using a single design system but we recently added a new brand which use our component library with different colors. Currently the tokens are overridden inside the panda config but we want to include them in the main design system to be able to reuse the updated tokens in other apps.

We don't want the user to switch the theme, it's the app that the decide which one to use. I'm wondering if I use the multi-themes config or if I create a separate preset which would extend the main design system config. I would also like the solution to support changing the default values for recipes e.g. isRounded variant for button would be set to true in a theme and false in another.

Any suggestions?

[segunadebayo]

I recommend creating an API similar to Park UI, where you expose a function to configure the preset.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@org/panda-preset'

const orgPreset = createPreset({ brand: 'brand-a', radius: 'round' })

export default defineConfig({
  // ...
  presets: ['@pandacss/preset-base', orgPreset],
})