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.
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
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
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
It isn’t supported in the default UI, as I said above 
you should indeed follow these very simple installation instructions first:
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.
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
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?
Did you restart hass and CTRL+F5 on the web ui page?
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.
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.
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.
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: localcustomizer: 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.yamlthank 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
cool, happy customizing!
1 Like
Hi, I’m trying to set different icon depending on state.attributes values via custom UI.
I’ve installed custom UI and customize and did all the setup in configuration.yaml and created a template in customize.yaml which show like this.
climate.sinope_climate_cave:
templates:
entity_picture: >
if (state.attributes.heatLevel < 1) return /local/heat-0.png;
elif (state.attributes.heatLevel < 21) return /local/heat-1.png;
elif (state.attributes.heatLevel < 41) return /local/heat-2.png;
elif (state.attributes.heatLevel < 61) return /local/heat-3.png;
elif (state.attributes.heatLevel < 81) return /local/heat-4.png;
else return /local/heat-5.png;
All png are in www folder
Custom UI is in www/custom_ui folder
state.attributes.heatLevel exist and show value from 0 to 100 %
I suspect that I don’t write my template correctly. Could someone help me with the correct syntax ? Thank you
you have to quote the returns:
return '/local/heat-0.png';
use only ‘if’ not ‘elif’
and you can takeout the else in the last line, simply use
return '/local/heat-5.png';
I thank you for this reply. I’ve tried it and it didn’t work. no change in my climate card. The icon is still the original one. worst I get flooded by Service “system_log/write” called. sending a strange big log message 12 pages long every 30 second:
data:text/javascript;charset=utf-8,%2F*!%20For%20license%20information%20please%20see%20scripts.js.LICENSE%20*%2F%0A!function(t)%7Bvar%20e%3D%7B%7D%3Bfunction%20i(s)%7Bif(e%5Bs%5D)return%20e%5Bs%5D.
…12 pages…
local%2Fcustom_ui%2Fstate-card-custom-ui.html.js%0A line 27 > Function:0:0 Script error.
kind of dump screen error