Change a Sensor Icon color - Very confused

Configuration
1

Hi I am trying to set the color of an icon for a template sensor, from what I’ve read I seem to be doing it correctly but there seem to be so much conflicting information

Below is the sensor deceleration and the sensor customize

sensors:
  recycling_pickup_day:
    friendly_name: Recycling Pickup Day
    value_template: >
      {% set date_now = as_timestamp(now()) | timestamp_custom('%d/%m/%y') %}
      {% set seconds_until_midnight = ((24 - now().hour - 1) * 60 * 60) + ((60 - now().minute - 1) * 60) + (60 - now().second) %}
      {% set tomorrows_date = (as_timestamp(now()) + (seconds_until_midnight)) | timestamp_custom('%d/%m/%y')  %}
      {% set pickupday = strptime(states.calendar.recycling.attributes.start_time, "%Y-%m-%d %H:%M:%S").strftime("%d/%m/%y") %}
      
      {% if pickupday == date_now %}
        TODAY
      {% elif pickupday == tomorrows_date %}
        TOMORROW
      {% else %}
        {{ pickupday }}
      {% endif %}

Customize.yaml

sensor.recycling_pickup_day:
  friendly_name: Recycling    
  icon: mdi:recycle
  templates:
    icon_color: <
              if (state == 'TODAY') { 
                 return 'rgb(255, 255, 0)';
              }
              else if  (state == 'TOMORROW') { 
                 return 'rgb(255, 255, 106)';
              } else {
                 return 'rgb(0, 0, 0)';
              }
1 Like
2

try this instead. I’m not sure what language it is, but I do know that the syntax you wrote is wrong:

sensor.recycling_pickup_day:
  friendly_name: Recycling    
  icon: mdi:recycle
  templates:
    rgb_color: >
      if (state === 'TODAY')
        return [255, 255, 0];
      else if (state === 'TOMORROW')
        return [255, 255, 106];
      else
        return [0, 0, 0];

Just want to clarify, The portions that were wrong was 3 equal signs, the direction of the arrow, the way you called out the rgb_color, and the template section you placed it in. The brackets you used are valid, but they are only necessary when you have a multiple lines inside your if/else if/else statements.

3

Thanks I’ll give your changes a try

4

If you look at the customizing docs there’s no template: section.

There’s also no way to set the colour of an icon in the current frontend. You could use an icon picture instead, or have a look at Lovelace.

5

You may be right, I’ve seen talk about it being possible using home-assistant-custom-ui package.
I might as well just wait until lovelace matures

6 
  templates:
    icon_color: >
      if (state < 1) return 'rgb(0,0,0)';
      if (state < 2) return 'rgb(51,0,0)'; 
      if (state < 10) return 'rgb(51,25,0)';
      if (state < 50) return 'rgb(102,51,0)';
      if (state < 150) return 'rgb(153,153,0)';
      if (state < 350) return 'rgb(102,204,0)';
      if (state < 700) return 'rgb(51,255,53)';
      if (state < 2000) return 'rgb(102,255,178)';
      if (state < 7000) return 'rgb(153,255,255)';
      return 'rgb(204, 255, 229)';

or

    icon_color: >
      if (state === 'on') return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

be sure to use
icon_color: > and not icon_color: <

rgb_color: isnt supported any longer for icon color templates
always check the state of the sensor in the dev-tools, and be case sensitive

1 Like
7

I assume icon_color only works when I use home-assistant-custom-ui
I’ve made all suggested changes but still can’t change the icon color

8

It isn’t supported in the default UI, as I said above :wink:

9

you should indeed follow these very simple installation instructions first:

10

Did code this today, and it works fine. I prefer native functionality, but HA lacks a lot for the GUI so meantime Custom UI works fine.

AIr

FIle: custom.yaml

sensor.air_pm_25:
  templates:
    icon_color: >
      if (state < 25) return '#6ee86e';
      if (state < 40) return '#ff9900';
      if (state < 150) return '#ff0000';
      if (state => 150) return '#990099';
1 Like
11

Hi,
I am trying to duplicate this for Lovelace Glance type card, I wanted my battery sensors and temperature sensors to show different colours depending on state.
I manually installed the CustomUI as per the above instructions, I then added this to one of my entries in customize.yaml (obviously i will do more but just wanted to get it working with one first)

sensor.lounge_main_remote:
  custom_ui_state_card: state-card-custom-ui
  friendly_name: Lounge
  icon: mdi:battery-outline
  templates:
    icon_color: >
      if (state > 12) return 'rgb(0,255,0)';
      return 'rgb(0,0,255)';

However this has not made any difference. I see no errors in my log and am unsure what the next step would be?

12

Did you restart hass and CTRL+F5 on the web ui page?

13

yes did both of those and tried from a private browser as well incase a cache issue.
I don’t think i have installed it all correctly actually, as i do not see Customizer component in my configuration panel.

14

did you follow @Mariusthvdb’s installation instructions?

15

I thought i had but now rechecking it all.
I have /www/custom_ui/state-card-custom-ui.html and /www/custom_ui/state-card-custom-ui.html.gz
Also created /custom_components/customizer/ (with 2 files init.py and services.yaml)

In my configuration.yaml i added;

  extra_html_url:
      - /local/custom_ui/state-card-custom-ui.html

However this failed to give me the extra options within configuration so i removed that and tried;

customizer:
  custom_ui: local

But still nothing.

16

HI,
though I am by no means experienced in Lovelace yet, and don’t know if it could have to do anything with Lovelaces specifics, I read you have the custom state card added in configuration.yaml. It is however a setting to be set in frontend.

I do that by having the frontend: !include frontend.yaml entry in configuration.yaml, and have the file frontend.yaml in the /config directory, and with this content:

##########################################################################################
# https://home-assistant.io/components/frontend/#javascript_version
# https://home-assistant.io/developers/frontend_creating_custom_ui/
##########################################################################################
##########################################################################################
# https://github.com/home-assistant/home-assistant/pull/10776
##########################################################################################

javascript_version: auto

themes: !include_dir_merge_named frontend_themes

extra_html_url:
  - /local/custom_ui/state-card-custom-ui.html
  - /local/custom_ui/state-card-tiles.html
  - /local/custom_ui/state-card-value_only.html
  - /local/custom_ui/custom-weather-card.html
#  - /local/lovelace.html

#  - /local/custom_ui/state-card-table.html
#  - /local/custom_ui/state-card-custom_scene.html
#  - /local/custom_ui/state-card-text.html

extra_html_url_es5:
  - /local/custom_ui/state-card-custom-ui-es5.html
  - /local/custom_ui/state-card-tiles_es5.html
  - /local/custom_ui/state-card-value_only.html
  - /local/custom_ui/custom-weather-card.html

#  - /local/custom_ui/state-card-custom_scene.html
#  - /local/custom_ui/state-card-text.html

never mind the # commented entries, this is simply to show you how to configure Ha to read the custom state cards correctly.

main point: you need frontend: set in your configuration.

17

yes, although not seperate like your setup i tried extra_html_url: under frontend.
my javascript_version is set to latest and i have themes as well. I then have customizer outside of this; (i understood i use either extra_html_url or customizer which is why commented out below)

# Enables the frontend
frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes/
  extra_html_url:
     - /local/custom_ui/state-card-mini-media-player.html
    # - /local/custom_ui/state-card-custom-ui.html
customizer:
  custom_ui: local
18

customizer: should be in the configuration.yaml.

or in a separate customizer.yaml and be referenced in configuration.yaml by:
customizer: !include customizer.yaml

##########################################################################################
# Base configuration
##########################################################################################

homeassistant:
  name: Name
  latitude: !secret latitude
  longitude: !secret longitude
  elevation: !secret elevation
  unit_system: metric
  time_zone: !secret time_zone
  customize: !include_dir_merge_named customize
  customize_glob: !include customize_glob.yaml
  packages: !include_dir_named packages
  whitelist_external_dirs: /config

config:

#conversation:
# Presence based lights https://home-assistant.io/components/device_sun_light_trigger/
# device_sun_light_trigger:

customizer: !include customizer.yaml

# https://github.com/custom-components/custom_updater
custom_updater: !include custom_updater.yaml
#debug_asyncio:
discovery:
#  ignore:
#    - ikea_tradfri
#    - philips_hue
#    - google_cast

frontend: !include frontend.yaml
hassio:
history: !include history.yaml
19

thank you, yes i did mean it was all in the configuration.yaml rather than seperate files.
I found my error, i did wget on the .gz file which was linked, instead of downloading and including a true .gz type zip it actually saved a webpage.

Now updated and seemingly working.
Many thanks for the assistance!

1 Like
20

cool, happy customizing!

1 Like