State dependent person icon color

I started using Lovelace and made a glance card that shows the state of 4 person entities that are connected to a bluetooth tracker. The states show up OK as text.
What I would like to have is that an icon or the color of the icon changes based on the state of the person (only home or not home), so I won’t need the text. It surprises me this is not default behaviour like it is for switches and binary sensors, but anyway. I tried the following in customize.yaml:

  icon: mdi:human
    icon_color: >
      if (state === 'home') return '#63ff02';
      return '#808080';

This doesn’t work. I also tried rgb_color instead of icon_color and ‘red’ instead of ‘#63ff02’ (I know that’s green). I have custom_ui installed, and when I check the state of person.lemontree in the developer tools, it shows:

editable: false
friendly_name: Lemontree
source: device_tracker.lemontree_bt
id: lemontreeperson
icon: mdi:human
templates: {
  "icon_color": "if (state === 'home') return 'red'; else return 'green';"
icon_color: red

That last line changes depending on the actual state, so it seems the logic is working, it just doesn’t influence the actual color of the icon. The only thing I can think of next is to define template binary sensor for each person, but the whole thing becomes quite convoluted that way. I can’t believe it should be so complicated. Are there simpler options?

Any help appreciated!

if you’re editing yaml, the correct syntax is:
icon_color: '{% if states("person.lemontree") == "home" %} red {% else %} green {% endif %}'

Thanks for your help! I tried it.
HA doesn’t complain about the config, but it doesn’t work, either.
The state of person.lemontree now shows:

friendly_name: Lemontree
editable: false
templates: {
  "icon_color": "{% if states(\"person.lemontree\") == \"home\" %} red {% else %} green {% endif %}"
source: device_tracker.lemontree_bt
icon: mdi:human
id: lemontreeperson
icon_color: {% if states("person.lemontree") == "home" %} red {% else %} green {% endif %}

which looks like the logic has not been evaluated, so a step backward, am I right?

Sorry I don’t know / use custom_ui…

I don’t think CustomUI uses the same template syntax. It uses Javascript rather than Jinja2, so the original was probably correct. I don’t currently use CustomUI, so I can’t tell you anymore than that.

I was able to change the color of an entity-button using the theme option. All the theme did was change the button colors for active and inactive. Unfortunately, I don’t have an example because I’ve wiped my configs since then.

I don’t know if person actually goes into active/inactive states, but you could try something like that since a number of cards support the theme option.

Alright, so this possible with Lovelace and the great card-modder card, but it’s a bit tedious.

Here is my example using the demo platform device trackers, but it also works for person:

type: 'custom:card-modder'
  type: entities
    - entity: device_tracker.demo_home_boy
  show_header_toggle: false
  --home-color: green
  --not_home-color: red
  --paper-item-icon-color: var(--[[ device_tracker.demo_home_boy.state ]]-color)

And the end result:

Now, the tedious part is that you probably need to wrap each person separately, so you can’t just list them all in entities and be done. You also probably need to put colors for each zone otherwise the template won’t match to a color and it will fall back to the built-in default (not your theme’s default, if you’re using one).

Took some time installing card-modder and card-tools, but it works now!
Thanks for helping me!

As you mentioned, indeed this seems to define the style for the whole card. I added more entities to the list and they all get the same color based on the state of the first person. It seems you need a card per person. I haven’t tried this, as it is not what I want. I’ll try a theme, or maybe it’s time to give up :slight_smile:

Depending on how you want it to look, you can put each of them plus their wrapper in a horizontal/vertical stack or some other layout/grouping card and make it look about the same as if they were in the entities card but still have them individually wrapped and styled.

I’m on mobile right now but if I find time I could probably give an example of that if you can’t figure out how to make it look like you want.

fyi: apparently icon_color has been issued as not supported anymore with the latest HA versions (87.1 still works)

people have reported succes using hs_color: instead.

Of course, that is in custom-ui templates, and that is not what you are doing in the lovelace cards, but you could try your first posts template.

find the correct hs color codes on where you can convert all codecs.

I tried hs_color in the template, but that doesn’t work.
Thanks everyone for your suggestions, but I’m giving up for now.

this will give your what you need. works on the latest 89.1 HA and current Custom UI.

    hs_color: if (state === 'home') return [148,91] ; else return [48,79];
    brightness: if (state === 'home') return 22 ; else return 252;

hs_color is “Hue / Saturation” and brightness is the lightness variable

1 Like

Vajonam, this indeed works like a charm.
Thank you very much!

1 Like

CustomUI definitely seems much easier for this.

Just for reference, here is some Lovelace I came up with that essentially manages do it, but it’s not as simple and requires a handful of custom cards. It also only works in this card, so the popup when clicking on them doesn’t get colored. It also might not show in the same order every time. Might need to sort the keys first.

- type: 'custom:config-template-card'
    type: 'custom:hui-vertical-stack-card'
      - type: 'custom:vertical-stack-in-card'
        cards: >-
          ${var cards = [];
          Object.keys(this.hass.states).forEach(entity_id => {
              if (entity_id.startsWith('person.')) {
                      'type': 'custom:card-modder',
                      'style': this.hass.states[entity_id].state == 'home' ? {} :
                          {'--paper-item-icon-color': 'var(--state-icon-active-color)'},
                      'card': {
                          'type': 'custom:hui-entities-card',
                          'entities': [entity_id]

Uses config-template-card, card-modder, and vertical-stack-in-card.

Too bad there’s still not a built-in way to handle stuff like this. This is something that has been requested constantly since pretty much the beginning.