[feature request] panda's dynamic themes

[dannylin108]

Panda-css has a possibility to define multiple themes and apply them dynamically.

Can multiple themes be added as option to createPreset or maybe possible to export createSemanticTokens park-ui's helper function to allow users to add themes manually as per panda's docs.

Thank you!

[FlatMapIO]

I have the same problem. If I don't set class=dark on the HTML, I don't even know how to correctly change the theme of a section. I tried the method in the Panda document to change the theme, The result is not quite correct

[cschroeter]

Sorry I don't really understand the issue.

[dannylin108]

Panda allows multiple themes, but park-ui panda present currently allows only one color theme.

So, I'm asking to export createSemanticTokens and createTokens functions, so the user can construct a preset with multiple color themes oneself.

Now it's like this:

// from panda/src/index.ts

const createPreset = (options: PresetOptions = defaultOptions): Preset => {
  const semanticTokens = createSemanticTokens(options)
  const tokens = createTokens(options)

  return definePreset({
    name: '@park-ui/panda-preset',
    theme: {
      extend: {
        breakpoints,
        keyframes,
        recipes,
        semanticTokens,
        slotRecipes,
        textStyles,
        tokens,
      },
    },
    conditions,
    globalCss,
  })
}

But it's nice to have like this:

// panda.config.ts
import { defineConfig } from '@pandacss/dev'

const theme1SemanticTokens = createSemanticTokens(options1)
const them1tokens = createTokens(options1);

const theme2SemanticTokens = createSemanticTokens(options2)
const theme2tokens = createTokens(options2);

const theme3SemanticTokens = createSemanticTokens(options3)
const theme3tokens = createTokens(options3);

export default defineConfig({
  // ...
  // main theme
  theme: {
    extend: {
      breakpoints,
      keyframes,
      recipes,
      theme1semanticTokens,
      slotRecipes,
      textStyles,
      theme1tokens,
    }
  },
  // alternative theme variants
  themes: {
    primary: {
      theme2semanticTokens,
      theme2tokens,
    },
   secondary: {
    theme3semanticTokens,
    theme3tokens,
    }
  }
});