Card mod: Change card (text) color based on state

Configuration Frontend
1

Hi all,

trying to make either the text or card color change to highlight when the humidity is too high. I was browsing around and found the cardmod but can’t seem to make it work. I’m not very proficient at Yaml yet can someone please verify / point out what I did wrong?

(Device: Sonos temp sensor)
Entity: sensor.temp_sensor2_humidity_2
Value: 60

type: entities
entities:
  - entity: sensor.temp_sensor2_humidity_2
  - entity: sensor.temp_sensor2_temperature_2
title: babyroom
show_header_toggle: false
footer:
  type: graph
  entity: sensor.temp_sensor2_humidity_2
card_mod:
  style: |-
    ${ if ( sensor.temp_sensor2_humidity_2 =>'60') {
      'ha-card {color: red;}'
    } else {
      'ha-card {color: red;}'
    }}
2

Following change both the background color and text color of the entity.
Ok, here it is:

type: entities
entities:
  - entity: sensor.temp_sensor2_humidity_2
    style: >
      * {color: {% if states('sensor.temp_sensor2_humidity_2')|int(0) >= 60 %}yellow{% else %}navy{% endif %};}
  - entity: sensor.temp_sensor2_temperature_2
title: babyroom
show_header_toggle: false
footer:
  type: graph
  entity: sensor.temp_sensor2_humidity_2
style: |
  ha-card {
    {% if states('sensor.temp_sensor2_humidity_2')|int(0) >= 60 %}
    background: red;
    {% else %}
    background: aqua;
    {% endif %}
  }

Of course, this is just example, you should choose what you really want to change.
Bets regards!

1 Like