Explore the possibilities to have card or even tool(set) specific themes

[AmoebeLabs]

The Problem To Be Solved

Home Assistant lets one specify a theme for each view, which gives a consistent look & feel theme-wise.

The question posed in #176 asks if theme support is there for a single card.

If we make this more general then you can even think about theme per tool...

But adding a theme to a card can also create other possibilities:

• say one is using some Material 3 theme as the basis
• This standard theme does not have some specific colors that are required for a card (say colors for a segmented arc)
• Adding these colors could be done locally, but what if they are put into a (small) theme that has light and dark colors? Then these extra colors could be used by loading that theme into the standard theme!

So, if a card can load a theme, it can be used to 'extend' the current theme, without having to modify the theme.

Additional background:

Related Issues (if any)

See:

• 176

• 80

Issue #80 is about light/dark support in the tools, so they can be styled directly, but still switch colors for light/dark themes. If these additional themes can be loaded, the result would be the same: one can add a range of specific colors which switch for light/dark modes!

(Optional): Suggested Solution

Home Assistant is able to load themes, but it is unclear to me what is required to get this done, as it requires some knowledge about the internals of Home Assistant frontend.

Old(er) implementation in card helpers, not having light/dark theming support as it seems:

• https://github.com/custom-cards/custom-card-helpers/blob/master/src/apply_themes_on_element.ts

The DOM stuff from Home Assistant Frontend itself, including fallbacks, and light/dark mode support:

• https://github.com/home-assistant/frontend/blob/dev/src/common/dom/apply_themes_on_element.ts

Both implementations look at the HA side of things, where my vantage point is from a card or toolset. I know the theme updates (also light/dark mode) are communicated through the hass variable, so accessible, and actionable if the theme mode changes!

Also, these HA implementations use default blue/orange colors if primary colors are not specified. This means I cannot use this implementation if I want to add/override colors using small themes: in that case, the current theme colors should be used, not overwritten by the HA defaults!

(Optional): Alternative Solutions

[AmoebeLabs]

Some results from the first experiment. Had to remove a lot from the to JS converted apply_themes_on_element.ts (rgb- styles and more), but at least the Material M3-D04-Magenta theme is loaded...

From the view-functional-card-examples.yml:

        # 1.6 ###################################################################

        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: light.livingroom_light_duo_right_light
              name: 'CircSlider Test'
            - entity: light.livingroom_light_duo_right_light
              attribute: brightness
              unit: "%"
              format: brightness
          theme: M3-D04-Magenta    

Result for card 1.6, bottom-right:

Dark mode after manual switching and refreshing seems to work if I look at the state (17%) and thumb ring colors:

The full theme is directly loaded in the style section of the card:

A magenta card between the teal-blue cards...

[AmoebeLabs]

Closed with #218