Custom UI - icon color change

@Tomahawk right, hopefully this will all be clear enough :slight_smile:

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: image

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!

8 Likes