Customise color and icon for state_badges, entities, etc. based on state/value

Configuration
1

Greetings!

I’m fairly new to Home Assistant, and at this stage I have Googled myself blue and would appreciate some direct help.
Is there a simple way to change icon, icon color, text color, state_badge color etc. based on the state or sensor value using vanilla Lovelace?

This code is working for a picture elements card, but is extremely verbose:

elements:
    elements:
      - entity: input_select.upstairs_temp_mode
        icon: 'mdi:weather-sunny'
        style:
          '--paper-item-icon-color': green
          left: 42%
          top: 77%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional
  - conditions:
      - entity: input_select.upstairs_temp_mode
        state: Night
    elements:
      - entity: input_select.upstairs_temp_mode
        icon: 'mdi:power-sleep'
        style:
          '--paper-item-icon-color': blue
          left: 42%
          top: 77%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional
  - conditions:
      - entity: input_select.upstairs_temp_mode
        state: Away
    elements:
      - entity: input_select.upstairs_temp_mode
        icon: 'mdi:arrow-expand-left'
        style:
          '--paper-item-icon-color': black
          left: 42%
          top: 77%
          transform: 'scale(2,2)'
        tap_action:
          action: toggle
        type: state-icon
    type: conditional
image: /local/house_top_floor.png
type: picture-elements

Background for specially interested:
I have spent too many hours now trying to get this to work without any add-ons. Surely, color and icon customisation must be part of the base package? After X hours I caved and installed Custom-UI only to find out an hour later that it is no longer maintained. icon_color don‘t work anymore with ha 0.110 · Issue #184 · andrey-git/home-assistant-custom-ui · GitHub

Help is greatly appreciated.

I have seen a lot of similar issues, but some of them are outdated and some recommend using deprecated add-ons. Seems like Custom-UI could have fulfilled my needs if supported.

I have numerous links, but limited as a new user.

2

Search for “Themes”.

3

Thanks for the feedback @tom_l. I was under the impression that Themes were on a “global scale” if that is the correct term, whilst I would like to set e.g. color on separate entities. This is why I did not venture down the themes path.

4

Yeah sorry wasn’t aware you did not mean a global change.

Card-mod is your best option.

5

That is a good suggestion. After reading the docs for Card-mod it seems quite strictly targeted towards the cards themselves (text font, card format, background etc.) and not as much towards conditional icon and icon color change. Although I observe that Card-mod does support badge styling, which is part of what I desire, it seems not as optimal as Custom-UI. Unless there are other options, I’ll either wait for more customisation options to become part of vanilla HA, or even downgrade slightly to get Custom-UI working.

6

I use switch templates in a handful of places. If I want icon colors outside my normal theme colors for icon on/off, I use ‘entity_picture_template’ in sensors.yaml. These .pngs are created by going to mdi icons website and customizing / downloading. Believe it’s icon 20px and padding 10px, but it’s been awhile…

switches.yaml:

# Example of icon_template
    garage_door_main:
      friendly_name: "Main Garage Door Switch"
      value_template: "{{ is_state('cover.main_garage_door', 'open') }}"
      turn_on:
        service: cover.open_cover
        data:
          entity_id: cover.main_garage_door
      turn_off:
        service: cover.close_cover
        data:
          entity_id: cover.main_garage_door
      icon_template: >-
        {% if is_state('cover.main_garage_door', 'open') %}
          mdi:garage-open
        {% else %}
          mdi:garage
        {% endif %}

sensors.yaml

#Example of entity_picture_template
    alarm_dot_com_sensor_home:
      friendly_name: "Alarm.com Home Sensor"
      value_template: >-
        {% if is_state('alarm_control_panel.home', 'armed_away') %}
          away
        {% elif is_state('alarm_control_panel.home', 'armed_home') %}
          stay
        {% else %}
          disarmed
        {% endif %}
      entity_picture_template: >-
        {% if is_state('alarm_control_panel.home', 'armed_away') %}
          /local/custom_icons/shield-home-away.png
        {% elif is_state('alarm_control_panel.home', 'armed_home') %}
          /local/custom_icons/shield-home-yellow-FDD835.png
        {% else %}
          /local/custom_icons/shield-home-blue-44739E.png
        {% endif %}
1 Like