Change icon based on state using Card-mod for entities card

Configuration Frontend
1

I’m trying to change the icon color based on active or non-active state of the sensor using card-mod.
My current solution does work but that is not based on card-mod

type: entities
entities:
  - entity: binary_sensor.ping_google
    name: Ping Google
    icon: mdi:router-network
  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    style: |
      :host {
        {% if states(config.entity)=='on' %}
          --paper-item-icon-color: red;
        {% endif %};
       }

image

I’ve gone through 🔹 Card-mod - Add css styles to any lovelace card - #4155 by catchdave
but could find the solution. Also been advised that --paper-item-icon-color is deprecated, although it still works. There is no example of this simple example in GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Can someone please guide me how to replace above configuration using card-mod ?
This doesn’t work

type: entities
entities:
  - entity: binary_sensor.ping_google
    name: Ping Google
    icon: mdi:router-network
    secondary_info: last-changed
  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             red
          {% endif %}
            green
        }

Do I have to use ifelse or it it be just active and non-active state icon based statement ?

2 Likes
2

Hi, try this:

{% if states(config.entity)=='on' %}
  red
{% else %}
  green
{% endif %}
3

Thanks Blackway, but I want the following to work without ifelse statements:

  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: true
    card_mod:
      style: |
        :host {
          --paper-item-icon-active-color: red;
          --paper-item-icon-color: green;
        }

Any idea why its not working ? According to this post it should work

1 Like
4

This variable is not supported anymore.
Your options:
— use new variables (domain and device_class dependent)
— use direct access to DOM element and a standard “color” css property instead variables.

1 Like
5

Hi IIdar, I can see that you struggled a lot in this space and then created a post with all the links (thanks for that) but I’m still struggling :frowning:
Are you able to fix what should I replace this to right one ?. The domain is binary_sensor and device_class is ‘connectivity’

I’ve tried the following too

 - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    card_mod:
      style: |
        :host {
          '--state-binary_sensor-on-color': red;
        }

or

  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: true
    card_mod:
      style: |
        :host {
          --state-binary_sensor-connectivity-on-color: '#009800'
        }

:frowning:

6

I haven’t tried these new variables, cannot give you a ready solution…
Check a huge thread dedicated to new colors in the Configuration / Frontend section.

7

This is how I worked it out

type: picture-elements
title: Home Lab Test
image: /local/Homelab2.png?v=1"
card_mod:
  style: |
    ha-card {
      --card-mod-icon: mdi:circle;
      --mdc-icon-size: 10px;  
      --state-binary_sensor-on-color: green;
      --state-binary_sensor-off-color: red;
elements:
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_radio
    style:
      top: 36%
      left: 33%
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_radio
    style:
      top: 35.8%
      left: 39%
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_ethernet
    style:
      top: 24%
      left: 36%
2 Likes
8

Here is my current code:

type: custom:config-template-card
variables:
  TVATTSTUGA_POWER: states['sensor.shellypmmini_543204a98624_power'].state
  YTTERDORR_BATTERY: states['sensor.ytterdorr_batteri'].state
entities:
  - climate.element_tvattstuga
  - sensor.ytterdorr_batteri
card:
  type: entities
  entities:
    - climate.element_tvattstuga
    - sensor.ytterdorr_batteri
  card_mod:
    style: |-
      ${ if (TVATTSTUGA_POWER >= 50) {
        ':host {--paper-item-icon-color: #AD4B17;}'
      } else if (YTTERDORR_BATTERY >= 50) {
        ':host {--paper-item-icon-color: #AD4B17;}'
      } else {
        ':host {--paper-item-icon-color: #2E4E6B;}'
      }}

The problem is that :host will target all entities in the list. How should I do to target only the related entity without splitting them into different cards?

9

For me the following code works:

    card_mod:
      style: |
        .entities-row div.entity:nth-child(1) {
          {% set state = states('sensor.voc_eg_wohnen') %}
          {% if state | int < 400  %}
            color: green;
          {% elif (state | int >= 400) and (state | int < 1300) %}
            color: orange ;
          {% elif state | int >= 1300 %}
            color: red ;
          {% endif %}
         }
       .entities-row div.entity:nth-child(2)  {
         .....
         }
10

Code will not work, no closing bracket.

If you use config-template-card (CTC) for conditional card-mod styling ONLY - then this is absolutely useless. Card-mod supports jinja templates. No need to use CTC.

Because “:host” is not used on a card’s level to style a row.
Go to the huge card-mod thread for a right syntax.

This is for multiple-entity-row ONLY.
I wonder why it posted here.

1 Like
11

It probably should have a closing bracket, but it works regardless
see?

image
image993×818 108 KB

12

If smth works in a case when it is not supposed to work due to a wrong use - then this could be a reason to report a bug.