I’m doing similar on my temperature badges, rather than the icons, and this works for me - you should be able to adapt it for your use:
"sensor.*_temperature":
templates:
theme: >
if (state > 25) {
return 'hot';
} else if (state >= 18 ) {
return 'comfortable';
} else {
return 'cold';
}
I tried your code, just changed the sensor name. Tried with and witout the " for the sensor name. without it working,
I am on lates Hassio.
The CustomUI works since my other sensor works fine.
Hmm?
OK, I added my sensor.bedroom_temperature sensor to my Bedroom group, without making any other changes, and it came up as follows:
So the whole entry was themed with the colour.
I then changed it to make it specific to just the icon, and the following works, so give this a try:
customize:
sensor.bedroom_temperature:
templates:
rgb_color: >
if (state > 25) {
return [0, 128, 0];
} else if (state >= 18 ) {
return [223, 76, 30];
} else {
return [35, 76, 99];
}
Thanks for helping out!
Looks like the rgb_color works only on the icon (-for me) when in a group, not the text. The rgb_color works not for the sensor when on the default view.
Do you know if there are a code for the color within the default sensor view?
Yeah if you use “rgb_color” as shown in my second post, it will only change the icon colour when in the group.
If you use “theme” as shown in my first post, it will change the colour of the badges (the circular representations shown in your second image). If you then add it to a group, whilst using theme, it will change the icon, text and value, as I show in the first image of my second post!
To use theme, you need to define the colours under the theme section of the front end - I’m at work now, but when I get home I will post that config for you.
Don’t worry, it confused the hell out of me (I find CustomUI incredibly confusing as it is!), so am happy to help!
@Tomahawk right, hopefully this will all be clear enough 
To change the badge colour, we use theme, and define the colours as hex:
homeassistant:
customize:
sensor.bedroom_temperature:
templates:
theme: >
if (state > 25) {
return 'hot';
} else if (state >= 18 ) {
return 'comfortable';
} else {
return 'cold';
}
frontend:
themes:
cold:
primary-text-color: '#447ebc'
label-badge-red: '#447ebc'
comfortable:
primary-text-color: '#629e51'
label-badge-red: '#629e51'
hot:
primary-text-color: '#bf1b00'
label-badge-red: '#bf1b00'
That will produce this: 
If we then add the sensor to a group, with the above left in place, it will change the text and state to the relevant colour, as shown here:
If we want to just change the icon colour, then we use rgb_color and define the colours as R, G and B values on a 0-255 scale:
homeassistant:
customize:
sensor.bedroom_temperature:
templates:
rgb_color: >
if (state > 25) {
return [191,27,0];
} else if (state >= 18 ) {
return [98,158,81];
} else {
return [68,126,188];
}
You can easily convert between RGB and Hex using this site:
Hope that helps!
Thank you so much!
Is it at all possible to change the background color within the sensor circle, when it is displayed on the default view?
sure, do anything you like:
well, almost. Havent found a way to distinguish between border colors of the badge and label. Also, no changing of the label text is possible (yet). Other than that, most things can be customized…
for the badges i use my dedicated frontend themes file, you might be able to adapt it to your own likings:
##########################################################################################
# Badge-themes in order of severity, either up or down
##########################################################################################
#source https://github.com/home-assistant/home-assistant-polymer/blob/master/src/resources/ha-style.html
# /* for label-badge */
# --label-badge-background-color: white;
# --label-badge-text-color: rgb(76, 76, 76);
# --label-badge-red: #DF4C1E;
# --label-badge-blue: #039be5;
# --label-badge-green: #0DA035;
# --label-badge-yellow: #f4b400;
# --label-badge-grey: var(--paper-grey-500);
green_badge:
label-badge-red: green
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: green
# label-badge-blue: blue
# label-badge-green: black
# label-badge-yellow: yellow
# label-badge-grey: grey
grey_badge:
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: grey
black_badge:
label-badge-red: black
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: black
brown_badge:
label-badge-red: brown
label-badge-border-color: brown
label-badge-background-color: white
label-badge-text-color: brown
orange_badge:
label-badge-red: orange
label-badge-border-color: orange
label-badge-background-color: white
label-badge-text-color: orange
blue_badge:
label-badge-red: blue
label-badge-border-color: blue
label-badge-background-color: white
label-badge-text-color: blue
yellow_badge:
label-badge-red: grey
label-badge-border-color: yellow
label-badge-background-color: lightgrey
label-badge-text-color: yellow
red_badge:
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: red
can I use this as single package?
yep very wel possible.
Keep it all together nice and tidy.
just beware to have the proper headers in place, along with careful indenting.
strange behavior might occur though. Groups declared in the packages aren’t shown after one clicks the reload groups button in configuration. Also, in my setup, script behave unreliably when declared in the packages, so I always put these in their dedicated /config/scripts folders.
Other than that, packages are very nice to have. very easy to take out also when testing and debugging…
I already use packages, but never with
homeassistant:
customize:
wondering if in packages do I have to put homeassistant: or not?
for sure, if you want to customize, it should be under homeassistant:
Just follow the order of your configuration.yaml
It does not work with Badges in state cards 
Have you an idea for this ?
I have try all these properties:
primary-text-color
label-badge
ha-label-badge-color
label-badge-blue
Bu no one works.
The color of text and icon are been modified only in detail card.
What do you mean by “it”?
Badge and state-card examples are here: Custom UI - icon color change - #15 by davefi
Badge background is here: Custom UI - icon color change - #17 by Mariusthvdb
Yes i am having the same problem it does not work it just stays red.
sensor.window_eliott_top:
friendly_name: Eliott
templates:
theme: >
if (state = 'Open') {
return red_badge;
} else (state = 'Closed' ) {
return green_badge;
}
If I do this the Badge goes green.
sensor.window_eliott_top:
friendly_name: Eliott
theme: green_badge
This is the frontend stuff
frontend:
themes:
green_badge:
label-badge-red: green
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: redIs rgb_color working anymore with custom_ui for you all? Looks like we need to switch to hs_color
homeassistant:
customize:
sensor.central:
templates:
rgb_color: [255,0,0]
is this expected to work for example ?
I am getting this :
primary-text-color: works to change a text color.
But rgb_color, label-badge-red and any other combination not working to change badge color.