Change the color of the icon of a virtual sensor depending of the state

Configuration
1

Hi!!
I have to change the color of the icon of a virtual sensor depending on the state of that virtual sensor.
I have in my configuration.yaml…
template: !include template.yaml, and of course I have a file named “template.yaml”, in which I have created the virtual sensor.

- sensor:
    - name: sensor.digital_input_1_on_off #MOTOR DE RIEGO
      state: >
        {% if is_state('sensor.digital_input_1', '0') %}
          OFF
        {% else %}
          ON
        {% endif %}

1
This part works perfectly.
As you can see, the virtual sensor takes its state from a digital sensor input (0 or 1), and I change 0 to OFF and 1 to ON

I have tried to change the color of the icon of the virtual sensor depending of the state of the virtual sensor (ON or OFF) following the instruction here

but I couldn’t make it work.

Somebody knows how I have to do?

Thanks in advance.

2

There’s no native support, in Home Assistant’s Lovelace UI, for specifying an entity’s icon color via an entity’s configuration.

If you wish to do that, you have to install a custom integration that provides additional functionality, including the ability to set an icon’s color via a template.

Refer to this for more information:

Those instructions are over three years old and outdated. Refer to the information in the link I posted.

3

Thanks a lot.
I will follow that instructions and I will tell you.

4

I would (and do) use card-mod, instead

Random example of mine for a badge

      - entity: binary_sensor.meteoalarm
        style: |
          :host {
              {% set level = state_attr(config.entity, "awareness_level")[:1] %}
              {% if level == "1" %}
                --label-badge-text-color: green;
              {% elif level == "2" %}
                --label-badge-text-color: yellow;
              {% elif level == "3" %}
                --label-badge-text-color: red;
              {% else %}
                --label-badge-text-color: white;
              {% endif %}
          }
1 Like
5

Hi!
I have tried but… Im afraid I need more help.
I will tell you what I have made, step by step, in the same way you can see in the picture:
1- I have created a folder and a new file with the names I founded in the instructions.
2- In the Resources part, I have added a new line as you can see in picture.
3- In the file “template.yaml” (where I have created the virtual sensors), I have added a few lines to change the color of de icon. I have tried a few different options from the examples, but doesn´t work.
4- I get a notification as you can see in the picture.

I think havent installed properly the cutom-ui, but I dont know where the error is.

Could you tell me what I am doing wrong?

Thanks a lot!

1
11670×1324 132 KB

6

Thank you.
I have tried that option and the other one, but I couldnt make it work…
Can you change the icon color too? Or just change the text color?
I couldnt find any example to do that.

7

Step 3 is wrong. You have misunderstood how to use what you installed.

You must define the entity’s icon_color as a customization, not directly in the entity’s configuration (which explains why you got the error message concerning icon_color).

Review the documentation for customizing entities and then look at some of the examples in the custom integration’s documentation.

8

Well… step by step :sweat_smile:
I could change the color of de icon, so I think I have got something

In my /config/customize.yaml I have:

  sensor.sensor_digital_input_1_on_off:
    friendly_name: MOTOR DE RIEGO

This part works perfectly

If I add this as a third line:
icon_color: 'red'
also works perfectly, but the icon is always red.
What I need is the color of the icon change when the state of the virtual sensor change (just 2 different states: ON or OFF).

I have tried a lot of different options from the examples, but no one works… I think my problem is the syntax.
Please, I need help with this.

I’ll paste the different ways I have followed just in case…

OPTION 1

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: 'red'
  #this is the option which works, but always red

OPTION 2

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: >
      if (state === 'OFF') return [255,255,0];
          return [255,0,0];

OPTION 3

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: >
    {% if state = OFF) %}
      'yellow'
    {% else %}
      'red'
    {% endif %}

OPTION 4

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: >
    {% if state == OFF) %}
      'yellow'
    {% else %}
      'red'
    {% endif %}

OPTION 5

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: >
    {% if state = 'OFF') %}
      'yellow'
    {% else %}
      'red'
    {% endif %}

OPTION 6

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  icon_color: >
    {% if state == 'OFF') %}
      'yellow'
    {% else %}
      'red'
    {% endif %}

ANY OTHER OPTIONS I HAVE TRIED, ALWAYS AS A THIRD LINE

 if (state = OFF) return 'red';

 if (state = 'OFF') return 'red';

 if (state == OFF) return 'red';
 
 if (state == 'OFF') return 'red';

 if (state = OFF) return 'rgb(255,0,0)';
 
 if (state = 'OFF') return 'rgb(255,0,0)';

 if (state == OFF) return 'rgb(255,0,0)';
 
 if (state == 'OFF') return 'rgb(255,0,0)';
1 Like
9

Here’s one of the examples from the documentation:

    sensor.synology_status_volume_1:
      templates:
        icon_color: >
          if (state == 'warning') return 'red';
          return 'green';

None of the examples you posted includes the template: option.

Try this in the customize.yaml file:

  sensor.sensor_digital_input_1_on_off:
    templates:
      icon_color: >
        if (state == 'OFF') return 'red';
        return 'green';
2 Likes
10

GREAT!!
That works perfectly
Thanks a lot!!

sensor.sensor_digital_input_1_on_off:
  friendly_name: MOTOR DE RIEGO
  templates:
    icon_color: >
        if (state == 'OFF') return 'steelblue';
        return 'red';
2 Likes
11

@Macario

Hi I’m also trying to use this module but I don’t get it to work. Can you help me out?

I’ve already installed the module via HACS.

I’ve created the file customize.yaml
image

In configuration.yaml I’ve add an include to customize.yaml
image

But I seem to get an error:

image
image1106×305 24.1 KB

What am I missing?

Thanks,
Meerkater

12

Hi Meerkater!

Is your “customize.yaml” file working with any other entity?
I am not an expert, but I think any customization wouldn’t works as you written it.

In the “configuration.yaml” file, change the line 4 for the following text:

homeassistant:
  customize: !include customize.yaml

If your file already contains the line “homeassistant:”, don’t write that line again. In this case, write just the second line (customize: !include customize.yaml) under the “homeassistant:” line, and remember typing 2 spaces at the begining of the line.

After doing this, chek yaml config and, if everything is ok, restart HA… and let me know if this customization works or not

If you get any other error, please copy/paste the text besides the snapshot. I don’t know your language, and it is easier for me to translate online if I can copy/paste

13

Hallo,

I cannot get my configuration work using your suggestions.

My configuration.yaml is the following:

# Loads default set of integrations. Do not remove.
default_config:

homeassistant:
    customize: !include customize.yaml
# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
mqtt: !include mqtt.yaml
template: !include template.yaml

      
sensor:
  - platform: systemmonitor
    resources:
    - type: disk_use_percent
      arg: /
      
    - type: disk_use
      arg: /
      
    - type: disk_free
      arg: /
      
    - type: memory_use_percent
    
    - type: memory_use
    
    - type: memory_free
    
    - type: processor_use
    
    - type: processor_temperature


device_tracker:
  - platform: bluetooth_le_tracker
    track_new_devices: true
    track_battery: true


# Telegram Bot
telegram_bot:
  - platform: polling

    allowed_chat_ids:
      - 5809411954

# Notifier
notify:
  - platform: telegram
    name: "andrea"
    chat_id: 5809411954

the template.yaml is:

sensor:
  - name: "Temperatura Salotto Raw"
    unique_id: "template_temperatura_salotto_raw"
    unit_of_measurement: "°C"
    state: "{{ states('input_number.helper_temperatura_salotto_raw')|float }}"
    
  - name: "Umidità Raw Salotto"
    unique_id: "template_umidita_raw_salotto"
    unit_of_measurement: "%"
    state: "{{ states('input_number.helper_umidita_salotto_raw')|int }}"
  
  - name: "Temperatura Salotto"
    unique_id: "template_temperatura_salotto"
    unit_of_measurement: "°C"
    device_class: temperature
    state: "{{ states('input_number.helper_temperatura_salotto')|float }}"
    
  - name: "Umidità Salotto"
    unique_id: "template_umidita_salotto"
    unit_of_measurement: "%"
    state: "{{ states('input_number.helper_umidita_salotto')|int }}"
    
  - name: "Stato Sensore Temperatura"
    unique_id: "template_stato_sensore_temperatura"
    state: >- 
      {% set b = states('input_boolean.helper_sensore_temperatura_connesso')|bool %}
      {% if b == true -%}
          Connesso
      {%- else -%}
          Disconnesso
      {%- endif -%}

and my customize.yaml is:

sensor.stato_sensore_temperatura:
  friendly_name: Stato Sensore Temperatura
  templates:
    icon_color: >
      {% if state == true -%}
        green
      {%- else -%}
        red
      {%- endif -%}

But I cannot get my icon get green o red.

What I am doing wrong?

14

Hi Andrea Rinaudo.

What is the error mesage you receive?
Are the sensors in your template.yaml working?

In your configuration.yaml, at the begining of the line “customize: !include customize.yaml” I can see more than 2 spaces. Make sure you type 2 spaces there.

In your customize.yaml, try this:

sensor.stato_sensore_temperatura:
  friendly_name: Stato Sensore Temperatura
  templates:
    icon_color: 'if (state == ''true'') return ''green''; return ''red'';'

if not, try this:

sensor.stato_sensore_temperatura:
  friendly_name: Stato Sensore Temperatura
  templates:
    icon_color: 'if (state == ''true'') return ''rgb(0,255,0)''; return ''rgb(255,0,0)'';'

You can choose the exact color in this web:

Let me know if works