Add support for theming, palettes and swatches

[AmoebeLabs]

The Problem To Be Solved

This issue collects a lot of the existing issues that reference card theming, and ideas around swatches and palettes.

• 205

• 176

• 80

The result of the possibility to load a theme on a card can be seen below: A magenta M3 theme, where the rest of the cards is using the Tealblue M3 theme:

And a combination with palette that overwrites some theme colors (see yellow):

Additional background:

Specifying a specific theme for a card makes it possible to have specific colors for that card only. It is a bit heavy on the resource side of course (memory).

Specifying a palette (a collection of swatches with light/dark mode support) makes it possible to include a specific set of colors to be used in the card, independent of the used theme. So instead of changing the theme or defining hard-coded colors, one can 'extend' the theme with other colors!

A color swatch is a small set of colors, defined for both light/dark modes.

The definition is identical to themes, hence looks like very small themes.

color_swatch_testing:
  template:
    type: colorswatch
  colorswatch:
    modes:
      light:
        sak-cs-default-text: 'var(--primary-text-color)'
        sak-cs-default-background: 'var(--primary-background-color)'
        sak-cs-default-01: 'lightred'
        sak-cs-default-02: 'lightgreen'
        sak-cs-default-03: 'lightblue'
        theme-sys-palette-secondary60: 'yellow'
        theme-sys-palette-primary50: 'darkblue'
      dark:
        sak-cs-default-text: 'var(--primary-text-color)'
        sak-cs-default-background: 'var(--primary-background-color)'
        sak-cs-default-01: 'darkred'
        sak-cs-default-02: 'darkgreen'
        sak-cs-default-03: 'darkblue'
        theme-sys-palette-secondary60: 'orange'
        theme-sys-palette-primary50: 'blue'

Related Issues (if any)

(Optional): Suggested Solution

Add support on two levels:

• card theming implements using another Home Assistant theme than the HA panel does
• card palettes lets you define a series of swatches with dedicated colors (with modes support)
• toolset palettes (not working if toolset is a template) lets you define a series of swatches with dedicated colors (with modes support)

Card-level support for themes:

        - type: 'custom:swiss-army-knife-card'
          theme: M3-D04-Magenta

Card-level support for palettes:

        - type: 'custom:swiss-army-knife-card'
          palette: 
            color_swatch_1:
              template:
                name: color_swatch_android_watch
                variables:
                  - dummy: 1
            color_swatch_2:
              template:
                name: color_swatch_testing
                variables:
                  - dummy: 1

Toolset-level support for palettes (Note: not working if toolset is a template!!!!!!!!!!!!!!!!):

        - type: 'custom:swiss-army-knife-card'
          layout:
            toolsets:
              - toolset: circ-slider-test
                palette: 
                  color_swatch_rainbow_11:
                    template:
                      name: color_swatch_rainbow_11
                      variables:
                        - dummy: 1

(Optional): Alternative Solutions