Allow themes to specify custom properties

[thislooksfun]

Describe the enhancement

The default HA themes allow users to select a custom primary and accent color without needing to make a different theme for every option. Custom themes could benefit from this as well.

In particular, I would like to see at least the following option types:

• A color picker, with support for setting the color in multiple places (either with templates or via css variables)
• A drop-down selector with support for defining custom overrides per-option (e.g. option "A" sets primary-color: red, but option "B" sets accent-color: blue and doesn't set primary-color at all).

Here is an example of how I would see this being used. This is obviously not final, it is just used to illustrate how I would like to use it. If you can think of a better way to organize this that still allows for the desired flexibility (see use cases below), then that would be awesome.

Theme With Options:
  options:
    # A simple color picker, like the default theme has, that sets the css var `theme-option--<option name>` 
    primary-color:
      type: color
      default: red
    # A dropdown (select box) that chooses from a set of styles to apply
    accent:
      type: select
      default: first # This is redundant, the first option should also be the default default, but it should be possible to override it
      options:
        first:
          accent-color: orange
        second:
          accent-color: pink
          other-color: orange

  modes:
    light:
      primary-color: var(--theme-option--primary-color)
    dark:
      primary-color: var(--theme-option--primary-color)

Use cases

I am the maintainer of the Catppuccin HA theme, which has 4 different palettes (3 dark and 1 light), each with 14 different possible accent colors. Unfortunately, in order to allow users to use these different accent options we have to ship a total of 98 different themes¹ (each accent option has 7 sub-options: one each for the 4 palettes + 3 more light+dark pairs). Having the ability to have a "accent color" selector would allow us to get that down to just 7, which would greatly simplify the installation process for our users. If you look at the difference between any two accent files you can see how similar they are. You can also look at the template file used to generate all the colors and you'll see just how much a simple "accent color" selector would benefit us.

Visual examples

No response

Anything else?

No response

Footnotes

1. For example, here is the full download for v2.1.3 of the theme: https://github.com/catppuccin/home-assistant/releases/download/v2.1.3/catppuccin-accents.zip ↩