How to change icon's colour of template sensor in Lovelace?

Configuration Frontend
1

Hi All,

I’m trying to implement a GUI representation of a sensor that has 3 states - open, closed and tampered.
I like the way binary_sensor changes icon and colour depending on its state and want to have the same functionality.
The trouble is I don’t know how to change colour.
Here is my config from sensor: section

- platform: template
  sensors:
    contact_safe_gui:
      friendly_name: safe
      value_template: "{{ states('sensor.contact_safe') }}"
      icon_template: >
        {% set state = states('sensor.contact_safe') %}
        {% if state == states('sensor.contact_always_open') %}
          mdi:door-open
        {% elif state == states('sensor.contact_always_closed') %}
          mdi:door-closed
        {% elif state == states('sensor.contact_always_tampered') %}
          mdi:image-broken
        {% else %}
          mdi:cloud-question
        {% endif %}
2

You can’t do it in the sensor definition, unfortunately. You can do it in customize.yaml, but you have to install/enable custom_ui. Then you should be able to do something like this:

sensor.zone_001:
  friendly_name: Front Door
  templates:
    icon_color: >
      return 'rgb(255, 0, 0)';

This also works:

return 'red'

icon_color was broken for a few Hass versions, but the latest custom_ui release fixed it.

Here’s how to do it with HSV:

script.arm_alarm_away:
  templates:
    hs_color: if (entities['sensor.armed_status'].state === 'armed_away') return [120, 100]; else return [0, 100];
    brightness: if (entities['sensor.armed_status'].state === 'armed_away') return 100; else return 10;

You can also do it in ui-lovelace.yaml, but you may still need custom_ui. I have something like this in a glance card.

- entity: sensor.zone_001
  templates:
    brightness: 252
    hs_color:
      - 148
      - 91

You can only do the kind of templating you’re using in customize.yaml, though, unless you use the experimental template card.

3

The custom button-card (https://github.com/custom-cards/button-card/) can change color depending on the state of things - perhaps it could based upon your template?

4

Thanks guys, but I want to keep it simple and as standard as possible.
If it involves custom_ui etc, I’ll live without colour OR find another solution :wink:
Sad they pushed us to Lovelace without giving such a basic thing…

1 Like
5

If it involves custom_ui etc, I’ll live without colour OR find another solution

A custom lovelace card is pretty trivial (and less impactful than custom_ui).

1 Like
6

Thousands of people missing years of the learning curve:
Install HACS, Uninstall HACS, Install Custon_ui, Uninstall Custon_ui, Install Custon Cards, Uninstall.
Just because a sensor model doesn’t behave like the binary sensor (blue-yellow) and doesn’t see the simple attribute as it should.
I don’t think they put in half a dozen code just to keep the community going.

PS I love Home Assistant

7

Hy Guys,

is it possible to change colour of only one icon of a switch that changes icon by changing state?

e.g.
off = white/grey
on = yellow?

- platform: template
  switches:
    buero:
      value_template: "{{ is_state('switch.sonoff_01minizb_b2d8b626_on_off', 'on') }}"
      turn_on:
        service: switch.turn_on
        data:
          entity_id: switch.sonoff_01minizb_b2d8b626_on_off
      turn_off:
        service: switch.turn_off
        data:
          entity_id: switch.sonoff_01minizb_b2d8b626_on_off 
      icon_template: >-
        {% if is_state('switch.sonoff_01minizb_b2d8b626_on_off', 'on') %}
          mdi:toggle-switch-outline
        {% else %}
          mdi:toggle-switch-off-outline
        {% endif %}

```