Another 'Icon color change based on state' question

coen17st · November 29, 2019, 8:09pm

I have been trying for some time to figure out how I can make an icon color change based on the state. I see that there are a lot of topics about this, but none of them offers me results and the topics date from 2017/2018 so I doubt that those are the right methods.

So i want to change the icon and icon color based on state, the icon change succeeded but the color did not. i have te following setup:


sensor:
  - platform: template
  sensors:
      voordeur:
      value_template: '{% if is_state("binary_sensor.aeon_labs_zw089_recessed_door_sensor_gen5_sensor", "on") %}Open{% else %}Dicht{% endif %}'
      friendly_name: 'Voordeur'
      icon_template: >-
          {% if is_state('sensor.voordeur', 'Open') %}
          mdi:lock-open-variant-outline
          {% else %}
          mdi:lock
          {% endif %}

customize:
  sensor.voordeur:
    templates:
        icon_color: >
        if (state === 'Open') return [143,29,29];
        return [45,133,58];

Capture
open

Markus99 · November 29, 2019, 9:21pm

Would love to know the answer to this as well. I’ve resorted to building my own sensors and using entity_picture_template along with custom MDI icons that I create and then save locally in needed colors. Cumbersome.

    xc90_doors:
      value_template: >-
       {% if is_state('lock.xc90_door_lock','locked') %}
         Locked
       {% else %}
         Unlocked
       {% endif %}
      entity_picture_template: >-
        {% if is_state('lock.xc90_door_lock','locked') %}
            /local/lock-blue.png
        {% else %}
          {% if is_state('device_tracker.volvo_unknown','home') %}
            /local/lock-open-blue.png
          {% else %}
            /local/lock-open-yellow.png
          {% endif %}
        {% endif %}

Dixey · November 29, 2019, 10:20pm

and all this time I thought I was just being stupid for not figuring out how to do this in a non-hacked way…

Sand · November 29, 2019, 11:12pm

Try with the hex color in single quotes, like

climate.oskar:
  unit_of_measurement: "%"
  icon: mdi:air-humidifier
  templates:
    icon_color: >
      if (attributes.hvac_action === 'heating') return '#f6d234';
      if (attributes.hvac_action === 'idle') return '#ff0000';

fiftys · November 30, 2019, 12:17am

if im not mistaken you still have to use Custom UI for this.

At least thats what ive been using for 6 months or so.

unless someone else chimes in…

then in customize.yaml:

light.sink:
  templates:
    icon: mdi:water
    icon_color: if (state === 'on') return 'rgb(0, 255, 0'; else return 'rgb(255, 0, 0)';

Mariusthvdb · November 30, 2019, 12:22am

indeed you must have custom-ui installed for icon_color to be available in customize first of all.

if so, then use:

customize:
  sensor.voordeur:
    templates:
      icon_color: >
        if (state === 'Open') return 'rgb(143,29,29)';
        return 'rgb(45,133,58)';

Mariusthvdb · November 30, 2019, 9:53am

why not try:

      entity_picture_template: >-
        {% if is_state('lock.xc90_door_lock','locked') %}  /local/lock-blue.png
        {% elif is_state('device_tracker.volvo_unknown','home') %}  /local/lock-open-blue.png
        {% else %}  /local/lock-open-yellow.png
        {% endif %}

or was your nested if else intended? In that case please ignore my suggestion

Markus99 · November 30, 2019, 4:09pm

Nope, you’re in the same boat as the rest of us…

Really seems like it should be built-in functionality - guess it’s time for a feature request for icon_color to work in sensors, switches and such - or even just icon_template / icon_color in lovelace would be fine with me - easier there than rebooting to reload updates sensors anyhow.

coen17st · November 30, 2019, 4:32pm

Ok, thanks all but it still doesn’t work.

I have installed CustomUI and can see the files in \www\custom_ui and also added these lines in my configuration.yaml

homeassistant:
  customize: !include customize.yaml

customizer:
  custom_ui: local

frontend:
  themes: !include themes.yaml
  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html

I have these lines in the customize.yaml

sensor.achterdeur:
  templates:
    icon_color: >
      if (state === 'Open') return [143,29,29];
      return [45,133,58];

sensor.voordeur:
  templates:
    icon_color: >
      if (state === 'Dicht') return [143,29,29];
      return [45,133,58];

But still no results

Mariusthvdb · November 30, 2019, 4:41pm

thats because your template rgb is incorrectly formatted … check my suggestion again please.

btw the extra_html_url is deprecated.

also, be sure to check the state, it should be the exact state displayed in developer-tools/state

coen17st · November 30, 2019, 4:49pm

Yes! Sorry I missed your message. it works now

Capture

sender · March 20, 2021, 6:24pm

Ok, sorry to open up this topic again. I cant get something working, probably beginnners level…

I want a simple motion sensor icon to not use the default yellow/blue colors but some others.

I have have been reading and googling the last hour but there is so much information, I went from card_mod to css to customisation… but never another colour of my icons done a lot but this I think must be close to the solution. I have:

binary_sensor.pir_motion_sensor_toilet_01:
  templates:
    icon_color: if (state === 'detected') return 'rgb(204, 255, 204'; else return 'rgb(255, 0, 127)';

or

binary_sensor.pir_motion_sensor_toilet_01:
  templates:
    icon_color: if (state === 'on') return 'rgb(204, 255, 204'; else return 'rgb(255, 0, 127)';

And the state is:

And I use:

But nothing happens to my icon colour, it keeps the same:

Where am I missing the boat?

Mariusthvdb · March 20, 2021, 7:39pm

First question: did you install custom-ui?

You need that to be able to use icon_color at all

And the states are on/off so ‘detected’ will never work, that’s the frontend representation only.

sender · March 20, 2021, 8:07pm

No I don’t think so because I do not know what it is…

Where can I get that? HACS?

Thought so, but eventually tried everything…

For now I ended up with this config in a picture elements card which works:

  - type: state-icon
    entity: binary_sensor.pir_motion_sensor_toilet_01
    title: Toilet-01
    style:
      top: 53%
      left: 39%
      '--mdc-icon-size': 40px
      '--paper-item-icon-color': lightgreen
      '--paper-item-icon-active-color': red

Mariusthvdb · March 20, 2021, 8:35pm

Yep, that’s the core way now, per card, per entity.

Checkout GitHub - Mariusthvdb/custom-ui: Add templates and icon_color to Home Assistant UI for its options and possibilities

No need to try everything, simply check the state in developer-tools…

sender · March 21, 2021, 6:03am

Hi Marius,

~~I had found and tried this. But there is no information icon colors per state?~~

Hold on, I misread, wrong link. I will try this and report back.

Also what I found:

'--mdc-icon-size': 40px
'--paper-item-icon-color': lightgreen
'--paper-item-icon-active-color': red

Is not mentioned there. Where would these “options” be documented? Have now scraped them from the forum. So I am still in the dark…

Any other solution?

And for “-7 Happy customizing!” in your link… how

Mariusthvdb · March 21, 2021, 8:54am

The style: is not from custom-ui but from card-mod by Thomas Loven. That’s what you should read up on. Please tell me you installed that?

No use blindly copying configs from the community without understanding what you are doing.

Come back here after installing it, and we’ll see if you still have trouble coloring per state;-)

sender · March 21, 2021, 9:13am

Yes, I have:

That is what I am trying to understand. But there is so much information (also outdated) on this forum and I cannot find a simple way how to do what I want. Thus I end up trying out without knowing what I am doing.

Even with your advice that I greatly appreciate (!) I am not able to understand what I should do where and why…

You said:

But how would I do that? Where would I start to do that per entity? Or is that what 'not you meant? That I can’t do icon colors per entity so that it is use in every entity card in lovelace?

But instead I should so i in a card in lovelace per entity and how?

See where I am struggling (as a non-yet coder)

~~EDIT: What I do want to avoid is to create a template sensor/thing per entity that I want a different icon colour based on state…~~

~~Edit: I am totally lost now where to start properly~~

~~EDIT2: I now have a lot more options (Perhaps due to the plugin):~~

~~But when I ad thing to this or via yaml, nothing happens with the color in lovelace…~~

~~This is what I use in customize.yaml:~~
</s> <s>binary_sensor.pir_motion_sensor_toilet_01:</s> <s> icon: mdi:account</s> <s> templates:</s> <s> icon: mdi:water</s> <s> icon_color: if (state === 'on') return 'rgb(128, 255, 0'; else return 'rgb(255, 0, 127)';</s> <s>

EDIT4: Steep learning curve… not sure what did the trick but got it working… pfew

Mariusthvdb · March 21, 2021, 10:24am

And you can use Jinja templates. Really, check the examples there and in the dedicated card-mod thread.

As for the Ha customize Ui you show, don’t use that for custom-ui, you can only use that for core customization. So not for icon_color or templates. As I stated in the repo, many of the custom-ui options are no longer supported, and, though displayed in that Ui, are no longer valid.

sender · March 21, 2021, 10:42am

Thank you. So now I still do not know the right way. Is that the customise.yaml file and customise per entity or customise in lovelace?