How can I use a colour that is defined as an entity, in lovelace cards?

Hi,

I’m trying to parameterise the colour for each room so that I can easily change the colour [value] in one place and it is automatically applied to all entities for a room.

image

I have defined a custom colour in the theme file which is then referenced in each lovelace card as follows:

color-lounge: "#2196f3"

icon_color: var(--color-lounge)

I’ve been experimenting to make the room colour an entity itself, as this is easier than editing the theme, and reference the state in the card, as follows:

image

icon_color: "{{ states('input_text.color_lounge') }}"

I’m using a number of popular custom cards and using the entity state method doesn’t work in some of them. So at the moment I’m using the state and the theme variable approach. I’ve thought for weeks about how I can do it but I’m not coming up with anything.

I’m hoping there’s an easy way to do it that I simply haven’t stumbled across. Does anyone know?

Thanks

You will run into a lot of trouble here and I’d suggest sticking to the theme.

Reason : to have any prayer of converting your stored data to something card code can use you will have to template.

Most core cards don’t support templates.

Therefore to be able to use that in those cards you have to introduce another card to allow expansion of a template before you dump it into the core card. (read: reauthor everything)

Whereas you already have one place to change the colors in the theme that works…

Thanks for the response Nathan, that’s a pretty good reason to stay with the theme then! I won’t waste any more time going down this path as the aim is to make it easier, not harder!

1 Like

Yeah i figured that.

Im currently trying to finalize a card that’s a conglomerate of four other fairly simple cards. And when I started nesting them the styles started interacting very… Poorly.

The you get to weird escaping and does this support multiple elements or lines or…

For the card I’m doing it’s worth the pain. It’s a permanent fixture that will take 1000 lines of code to 5 for something I intend to replicate 45 times on my dash.

A slider for something you can already easily change elsewhere…

That said I would LOVE if HA supported a color palette for the default theme and exposed all the color elements to color pickers in a ‘customization’ section and finally end this debate about whether HA updates should adjust the colors. ;). I have to do the research to see if someone already submitted it as a feature req to Lovelace.

Good luck. I would happily second that request too!