Add new custom theme into the default theme

[ryanpark]

Hi 🐼

Is it possible to add new custom theme into the default theme ?
I would like to do something like :

semanticTokens: {
        colors: {
          heavy: { value: '#443366' },
        },
         // custom theme but doesn't work (is not assignable to type 'DeepPartial<SemanticTokens<string> | undefined>')
        twitter: {
          color: { value: '#006699' },
        },
      },

Thank you

[anubra266]

https://panda-css.com/docs/guides/multiple-themes

[ryanpark]

Hi @anubra266 Thanks,
Where does following config goes to ? How do I use this config ?

const config = {
  conditions: {
    light: '[data-color-mode=light] &',
    dark: '[data-color-mode=dark] &',
    pinkTheme: '[data-theme=pink] &',
    blueTheme: '[data-theme=blue] &'
  }
}

[ryanpark]

I have another question: what if I want to add a new theme? I believe Panda-css provides the following themes:
Breakpoints, Colors, Spacing, Border Radius, Shadows, Sizing, Fonts, Font Sizes

but what if I want to add something like Gradient or Weight ?

Object literal may only specify known properties, but 'gradient' does not exist in type 'DeepPartial<SemanticTokens<string>>'. Did you mean to write 'gradients'?

[anubra266]

@ryanpark config is in your pánda . config
The second one means use gradients (with an s) not gradient