Another 'Icon color change based on state' question

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)';
2 Likes

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)';
1 Like

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

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

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.

3 Likes

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 :frowning:

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

1 Like

Yes! Sorry I missed your message. it works now :slight_smile:

Capture

1 Like

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 :frowning: 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:
image
image

Where am I missing the boat?

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.

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

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…

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 :man_shrugging:

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;-)

Yes, I have:
image
image

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) :slight_smile:

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 :see_no_evil: :ok_man:

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

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.

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?

you cant possibly have read all of that, and still have no idea :wink: please give yourself some time, and simply try both ways, there is no single ‘right’ way.

Depending on your needs (only a single card, or more thoroughly customizing your full config) you could go either way. Or both, as I do…

the single binary sensor coloring would be quite simple, and, given the fact you have installed both, would allow you to do either.

There is no “right” way. But there are several workarounds.

Ok, thank you.

Then maybe one last time ask the question the other way around.

I have had numerous times in my short life time homeassistant that I started something and suddenly it was not supported anymore. And I had a lot of work, time and frustration after to set things right.
What is the “best” way to do this coloring and formatting then?

you’re best bet would be either core HA (which unfortunately doesnt do what you want (yet)) or with a piece of software that is being actively developed, like card-mod.

It would have been nice to see the power of custom-ui being absorbed by a current dev, but as it stands the is not yet the case.

Custom-ui still works, at least for these important options of icon_color and templates in customizations, but I can make no promises, as I am no dev, and fully dependent on the kindness of those that are and willing to help if and when he time arises (again) she of its functionality stops, because of the development of core HA.

Maybe I can persuade certain dev’s to rewrite custom-ui, but that would take some serious effort I am afraid :wink: