Multi-brand Theming

In this lesson, you will learn how to set up a multi-brand theming strategy in Panda CSS. This approach supports multiple brands, products, or platforms within a single design system, allowing for consistency and flexibility.

From the Figma design, this lesson uses three brands for illustration: Cosmos (default brand), Kent and Oxford.

Define the Default Theme

Within the theme object in the panda.config file, define the default theme of your application.

 theme: {
    extend: {
      semanticTokens: {
        fonts: {
          cardTitle: { value: 'Inter' },
        },
        colors: {
          cardBg: { value: 'white' },
          cardAccent: { value: 'black' },
        },
      },
    },
  },

Define the Multiple Themes

Use the themes key in the panda.config file to define additional themes.

themes: {
    kent: {
      semanticTokens: {
        fonts: {
          cardTitle: { value: 'Domine' },
        },
        colors: {
          cardBgr: { value: 'white' },
          cardAccent: { value: '{colors.red.500}' },
        },
      },
    },
    oxford: {
      semanticTokens: {
        fonts: {
          cardTitle: { value: 'Paytone One' },
        },
        colors: {
          cardBg: { value: '{colors.green.50}' },
          cardAccent: { value: '{colors.green.600}' },
        },
      },
    },
  },

Generate Themes

Add the staticCss key to generate all themes.

theme:{
  //add theme
}
themes:{
  //add theme
}
staticCss: {
  themes: ['*'],
},

Utilize Themes in Component

Use React state to control the current theme dynamically.

const [theme, setTheme] = useState('cosmos')

return (
  <div>
    <select onChange={(e) => setTheme(e.target.value)}>
      <option value="cosmos">Cosmos</option>
      <option value="kent">Kent</option>
      <option value="oxford">Oxford</option>
    </select>
    <div data-panda-theme={theme}>
      <Card />
    </div>
  </div>
)