Color replacement in multiple theme modes

[QuentinRoy]

Clear and concise description of the problem

The colorReplacements applies to every themes, there is no way to specify replacements for one particular theme only. This can be quite problematic when multi-themes are provided (e.g. light and dark).

Suggested solution

colorReplacements options could be namespaced with the name of the theme, for example:

{
  lang: "js",
  themes: { dark: "min-dark", light: "min-light" },
  colorReplacements: {
    "min-light": {
      "#ff79c6": "#189eff",
    },
  },
}

Alternative

colorReplacements could also be a property of themes

{
  lang: "js",
  themes: {
    dark: {
      name: "min-dark",
      builtIn: true,
      colorReplacements: {
        "#ff79c6": "#189eff",
      },
    },
    light: "min-light",
  },
}

I added the builtIn property as well, since without it, the theme wouldn't be recognized as a built-in theme.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• [X] If this feature request is accepted, I am willing to submit a PR to fix this issue

[antfu]

Good points. I think the first approach make sense to me, PR welcome!

[QuentinRoy]

Should it be namespaced by the name of the theme (in the exampel above "min-light") or its label (in the example above "light"? I tend to feel it makes more sense to use the name of the theme since change to the applied theme is likely to render most color replacements deprecated, and leaving it as is would probably be an error.

[antfu]

I would vote for the name of the theme - so you users could have a single replacement registry for every theme without being bound to the ones being assigned temporarily.