Virtual Colors vs Mutli-Theme Tokens?

[chuckdries]

Hi,

I'm working on an interface which is mostly monochrome, but the user can change the primary color at runtime. I'm wondering whether the Virtual Color feature is right for this, or whether I should explicitly define the various color themes using Multi-Theme Tokens. So far, virtual colors gives me the benefit of re-using the built in theme color palette out of the box, but has the con that I can't use the colorPalette token in my config theme.

Ideally, I'd like to do something like this in my panda.config.ts

  theme: {
    semanticTokens: {
      colors: {
        text: {
          value: {
            base: "colorPalette.700",
            _osDark: "colorPalette.300",
          },
        },
      }
    }
  }

and set colorPalette on the top element in the app and just use the text token everywhere, but that doesn't appear to work.

Any guidance? I get the feeling that Multi-Theme Tokens is what I actually want, but I can't see a way to reuse the default theme hues with that.

[FranciscoKloganB]

Not quite sure what is the objective but have you considered using var(--color-user-palette-700) directly in semantic tokens instead of referencing color tokens?

On the one hand this approach allows user to define whatever colors they want via input field at runtime. Based on those inputs you can update --color-user-palette-* vars on the fly. On the other hand if the user selects premade themes, then probably the easiest is to just define more conditions (e.g., _pinkfloyd, _pineapple) on the semantic tokens.

Please let me know if you need more help brainstorming or in case I missed the point.

[chuckdries]

That sounds like a promising approach, I'll give it a shot. Thanks!