Change font colour depending on state

Configuration Frontend
1

Hi,

Still new to homeassistant but slowly getting to grips with it. I have just made a new dashboard and added a horizontal stack, and 2 mushroom template cards within that. I have figured out how to change the colour of the icons within these templates depending on states, but is there also a way to change the colour of the text?

Here is my code:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Living Room
    secondary: |
      {{ states('sensor.wiser_lts_temperature_lounge') }}°
    icon: mdi:sofa-outline
    entity: light.living_room_wall_lights
    icon_color: |-
      {% if is_state('light.living_room_wall_lights', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: livingroom
    hold_action:
      action: toggle
  - type: custom:mushroom-template-card
    primary: Day Room
    secondary: |
      {{ states('sensor.wiser_lts_temperature_day_room') }}°
    icon: mdi:sofa-single-outline
    entity: light.wiz_day_room
    icon_color: |-
      {% if is_state('light.wiz_day_room', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: dayroom
    hold_action:
      action: toggle

What I would like to do is if a radiator in the room is calling for heat, I would like it to make this part have red text instead of white.

{{ states('sensor.wiser_lts_temperature_lounge') }}°

Hope that makes sense!

2

What do you mean by “calling for heat”, what/which state/states should “trigger” the color-changes ?

PS: I.e you can use Card_Mod, to achieve this

3

I tried card mod but didnt work, but maybe I did it incorrectly.

What I mean by calling for heat is that the thermostat has an attribute that changes to true when the radiator is telling the boiler to turn on

4

Something like this

card_mod:
      style: |
        ha-card {
            --secondary-text-color: {{ 'red' if is_state('sensor.wiser_lts_temperature_lounge', 'true') else '#ffffff' }};
        }