style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|float <= 20 %}
red
{% elif states(config.entity)|float <= 35 %}
orange
{% else %}
#4287f5
{% endif %}
;
}
1 Like
Is Custom UI donāt work anymore?
yes it does still work
just a heads_up: this doesnāt work from ha 0.110 onwards.
Ive created a feature request in the Frontend Github replace custom-ui, allow for customizing entities globally Ā· Issue #5892 Ā· home-assistant/frontend Ā· GitHub
and though Bram has suggested a custom script should be able to do what custom-ui did, I havenāt been able to understand how. Hope to get some followup advice.
Really lost here, and thereās truly no way any current custom card can do what custom-ui does. The examples I posted speak for themselves.
Should be really simple though, replace icon_color with another attribute/option. Icon can still be templated, so the main framework still holdsā¦
preparing for the time custom-ui wont be availableā¦
Tomahawk, could you help me out here? this doesnt show a single entity, while without the style, the list is displayed alright. Please have a look?
- type: custom:auto-entities
card:
title: Philips light level (lux) sensors
type: entities
filter:
include:
- entity_id: sensor.*_sensor_light_level_raw
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|float < 1 %} maroon
{% elif states(config.entity)|float < 300 %} firebrick
{% elif states(config.entity)|float < 10000 %} orange
{% elif states(config.entity)|float < 17000 %} green
{% elif states(config.entity)|float < 22000 %} gold
{% elif states(config.entity)|float < 25500 %} teal
{% elif states(config.entity)|float < 28500 %} dodgerblue
{% elif states(config.entity)|float < 33000 %} lightskyblue
{% elif states(config.entity)|float < 40000 %} lightblue
{% elif states(config.entity)|float < 40000 %} lightcyan
{% else %} azure
{% endif %}
;
}
using the styling on the entities card directly does list the sensors, but simply doesnt color anythingā¦
type: entities
style: |
:host {
--paper-item-icon-color: etc
Sorry to inform you that it does not work with entity-filter.
" Note that some cards ( conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others) do not have a ha-card element, and card-mod will thus not work for those. There is a workaround, though"
HI, thanks for getting back to me on this.
I was gladly surprised this morning my template above had kicked in overnightā¦ It might have been a cache thing, not really sure because I had even restartedā¦ you never knowā¦
Of course, I had forgotten the options: in the above auto-entities card. Re-checked the docs, added that and it still was dead on me. Until this morning 
- type: custom:auto-entities
card:
title: Test auto coloring light level (lux) sensors
type: entities
filter:
include:
- entity_id: sensor.*_sensor_light_level_raw
options:
style: |
:host {
--paper-item-icon-color:
{% set level = states(config.entity)|float %}
{% if level == 0 %} black
{% elif level < 1 %} maroon
{% elif level < 300 %} firebrick
{% elif level < 10000 %} orange
{% elif level < 17000 %} green
{% elif level < 22000 %} gold
{% elif level < 25500 %} teal
{% elif level < 28500 %} dodgerblue
{% elif level < 33000 %} lightskyblue
{% elif level < 40000 %} lightblue
{% elif level < 40000 %} lightcyan
{% else %} azure
{% endif %}
;
}
showing like this now:
2 Likes
the issue has been mitigated: Bram fixed custom-ui so it works from 110 on: https://github.com/home-assistant/frontend/issues/5892#issuecomment-630910390
thanks to all for thinking along.
1 Like
Help! kind people,
I still can not get the icon color to work on HA 0.110 even with copied state-card-custom-ui.html
I have tried for most of the day to implement the change given in the link from Marius. I have checked my state-card-custom-ui.html file that i grabbed from the fork(patch-2) and the wording is the new wording but i cannot get the icons to be the correct icon color.
Here is what i have in an entity card:
and here is more-info showing that it has used the template as far as I can understand
and here is my frontend code:
in_frontend.yaml
frontend:
themes: !include_dir_merge_named ../themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
#extra_html_url_es5:
# - /local/custom_ui/state-card-custom-ui-es5.html
extra_module_url:
- /local/custom-sidebar.js
and config.yaml entries:
homeassistant:
customize: !include customize.yaml
customize_glob:
light.*:
custom_ui_state_card: state-card-custom-ui
switch.*:
custom_ui_state_card: state-card-custom-ui
templates:
icon_color: if (state === 'on') return 'green'; else return 'red'
sensor.temperature_158*:
custom_ui_state_card: state-card-custom-ui
templates:
icon_color: >-
if (state > 22) return 'red';
if (state <= 18 )return 'blue';
return 'green';
I had been using templates within the customize.yaml, they all worked up until the 0.110
this is typical of the code for the color of a switch:
templates:
icon_color: if (state === 'off') return 'rgb(255,0,0)'; if (state ==='unavailable')
return 'rgb(128,128,128)'; if (state ==='on')return 'rgb(0,255,0)';
I have tried all sorts of stuff, deleted contents of www/custom-ui then copied from downloaded (from patch-2 branch of Mariusā) folder. I have emptied the cache on windows pc (chrome) used Macbook, also on chrome but to no avail, restarted, rebooted, all things inbetweenā¦
Can anyone shine some light on this before i downgrade back to 0.109
Me tooā¦ also have this problem 
Iāve hacked the state-card-custom-ui.html file, and just upgraded to 0.110 - no issues.
However my configuration is different - no state-card-custom-ui:
customize_glob:
"*.*":
custom_ui_state_card: state-card-custom-ui
sensor.*battery*:
templates:
icon_color: >
if (state > 75) return 'green';
if (state > 50) return 'gold';
if (state > 25) return 'orange';
if (state > 10) return 'brown';
return 'red';
This is using Chrome under windows.
Is there any way to ask the guys behind Home Assistant to bring back the option to do the:
icon_color, etc
stuff in next update?
It was Wonderfull to make everything your ownā¦ now we need to do lots of things to let it work.
I have many many configs like this:
sensor.buienradar_temperature_2d:
friendly_name: "Temp. after 2 days"
templates:
icon_color: >-
if (state > 38) return 'rgb(181,14,2)';
if (state > 32) return 'rgb(214,18,4)';
if (state > 27) return 'rgb(255,0,0)';
if (state > 21) return 'rgb(255,150,0)';
if (state > 16) return 'rgb(255,204,0)';
if (state > 10) return 'rgb(0,255,0)';
if (state > 4) return 'rgb(4,181,4)';
if (state > -1) return 'rgb(0,170,217)';
if (state > -7) return 'rgb(0,0,255)';
if (state > -12) return 'rgb(121,24,196)';
if (state > -18) return 'rgb(176,0,189)';
if (state > -23) return 'rgb(189,0,107)';
return 'rgb(0,0,0)';
Donāt use the wildcard option, because some entities need different things.
Now have to change the whole config. More then 150 entities I must edit somewhere in HA in stead of 1 file with all the customize stuff in it.
1 Like
Youāve posted this in a few threads now but you havenāt bothered searching for the solutionā¦ which is listed in this thread 4 posts up from this.
I have searched and tried several things I read here.
But there is so many posts that sometimes itās not clear if that is the solution or not. But thanks for the link to it.
I have found my problem with icon_color in 110.0
In my custom_ui directory I had extra files (state-card-custom-ui.html.gz for example)
once i removed these and now only have:
state-card-custom-ui.html (modified as per Marius direction)
state-card-custom-ui-es5.html
and once I had cleared the cache several times it now loads the icon colors as it did before.
Thanks again to @Mariusthvdb
Lets hope the devs either incorporate the ability to change icon and icon color as the user. I know he has explained the need far better than I could on another thread.
Not sure that caused it. Rather, I suspect it to be a cache issue, which has resolved itself.
You could test by adding a file again.
Anyways, glad it is working againā¦ a huge reliefā¦
Team, I still get an error after running the latest (patch1) html file.
What am I missing here?
020-05-22 18:08:05 ERROR (MainThread) [frontend.js.latest.202005191] https://pcznjl1x6a213f1n9ktwshwtt48uohvx.ui.nabu.casa/local/custom_ui/state-card-custom-ui.html.js:26:8912 Uncaught TypeError: e.push is not a function
that is an error that has been around for very long now, and it doesnāt hurt operation.
Remember custom-ui was developed for States, no Lovelace, and hasnāt been updated for a year now, so HA code has changed a lot since then.
fwiw, I seem to get the error when loading custom-ui via customizer, and didnt see it when loaded via extra_html_urlā¦
but, since extra_html_url is discouraged (maybe worse) I am not sure I should advice you to use that
havenāt tried this yet, but maybe we can simply take the
e.push("pages",e.localize?"customui":{domain:"customui",caption:"Custom UI",description:"Set UI tweaks.",loaded:!0})
out of line 27 of the file.
Okay, thanks. I only see the behaviour when clicking the āConfigurationā tab.
Iāll just ignore it now. Thanks
ignore my bit about loading the custom-ui, it doesnt influence, I see it alsoā¦
one would expect it to show on developer, but I see it on configuration too like you.