Entity Icon color & custom icon color based on state (customise icon_color)

Feature Requests
121

Hey @kman42 you can certainly do that. I have a chip card that changes colour, changes the icon and displays whether its on or off for a pump.

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: binary_sensor.compressor_status_31101
    tap_action:
      action: more-info
    content: |-
      Compressor: 
        {% set d ={
        'off': 'Off',
        'on': 'On', 
        } %}
        {{ d.get(states(entity)) }}
    icon: |-
      {% set state=states(entity) %}
      {% if state=='off' %}
      mdi:heat-pump-outline
      {% elif state=='on' %}
      mdi:heat-pump
      {% else %}
      mdi:hvac
      {% endif %}
    icon_color: |-
      {% set state=states(entity) %}
      {% if state=='on' %}
      green
      {% else %}
      grey
      {% endif %}

The challenge will be to see if your internet entity can display an on/off status.

1 Like
122

since this older topic still lives, I am posting here to let you know we released 2 new versions of Custom-ui that let you use And customize and attribute icon_color.

custom-ui: the most complete version allows for templating to those icon colors. these templates are in JavaScript.

custom-icon-color: only provides that attribute so you can use it in the customize section.

both will allow you to use an attribute icon_color in template: entities, and then use regular Jinja in those templates

there is also support for the entity and button card, and we’ve started working on the Tile-card, but that still needs some work.

while at it, we’ve also released a new plugin:

custom-more-info, developed by @elchininet , and this allows you to control what is displayed on the More info panels of any entity.
(originally in custom-ui to hide the templates it set, but now fully fleshed out to control anything from history and logbook, to any attribute you might want to filter. Or unfilter from HA frontend default filters.)

3 Likes
123

I am FULLY in over my head and more so in my head to this realm. I think I correctly implemented some icon color code from the net, but it is not functioning? #1 Did I implement wrong? #2 Is the code flawed? #3 Did something change internally? Thank you in advance, kindest regards, Anthony
PS I used Developer Tools to check the entity, it seems set appropriately

type: custom:auto-entities
card:
  type: entities
  title: null
entities:
  - entity: sensor.yahoofinance_dji
    style: |
      :host {
        --paper-item-icon-color:
          {% if is_state_attr("yahoofinance.dji","trending", "up") -%} green 
          {% elif is_state_attr("yahoofinance.dji", "trending", "down") -%} red
          {% else %} white
          {% endif %};
    name: null
    type: custom:multiple-entity-row
    state_header: Price
    format: precision2
    secondary_info:
      attribute: regularMarketChangePercent
      unit: "%"
    entities:
      - attribute: regularMarketDayLow
        name: Low
        format: precision2
      - attribute: regularMarketDayHigh
        name: High
        format: precision2
  - entity: sensor.yahoofinance_gspc
    style: |
      :host {
        --paper-item-icon-color: {% if is_state_attr("yahoofinance_gspc", "trending", "up") -%} green 
                                 {% elif is_state_attr("yahoofinance_gspc", "trending", "down") -%} red
                                 {% else %} white
                                 {% endif %};
    name: null
    type: custom:multiple-entity-row
    state_header: Price
    format: precision2
    secondary_info:
      attribute: regularMarketChangePercent
      unit: "%"
    entities:
      - attribute: regularMarketDayLow
        name: Low
        format: precision2
      - attribute: regularMarketDayHigh
        name: High
        format: precision2
  - entity: sensor.yahoofinance_ixic
    style: |
      :host {
        --paper-item-icon-color: {% if is_state_attr("yahoofinance.ixic", "trending", "up") -%} green 
                                 {% elif is_state_attr("yahoofinance.ixic", "trending", "down") -%} red
                                 {% else %} white
                                 {% endif %};
    name: null
    type: custom:multiple-entity-row
    state_header: Price
    format: precision2
    secondary_info:
      attribute: regularMarketChangePercent
      unit: "%"
    entities:
      - attribute: regularMarketDayLow
        name: Low
        format: precision2
      - attribute: regularMarketDayHigh
        name: High
        format: precision2
  - entity: sensor.yahoofinance_rty_f
    style: |
      :host {
        --paper-item-icon-color: {% if is_state_attr("yahoofinance.ixic", "trending", "up") -%} green 
                                 {% elif is_state_attr("yahoofinance.ixic", "trending", "down") -%} red
                                 {% else %} white
                                 {% endif %};
    name: null
    type: custom:multiple-entity-row
    state_header: Price
    format: precision2
    secondary_info:
      attribute: regularMarketChangePercent
      unit: "%"
    entities:
      - attribute: regularMarketDayLow
        name: Low
        format: precision2
      - attribute: regularMarketDayHigh
        name: High
        format: precision2
visibility:
  - condition: state
    entity: input_boolean.hide_markets
    state: "on"
124

you need the card_mod: key before the style: key

card_mod:
  style: |
    :host {
      --card-mod-icon-color:
          {% set active = states(config.entity)|int(-5) %}
          {{'var(--active-color)' if active > 0 else 'gray'}};
  }