Card-mod color change based on sensor does not work

[artstam]

I am struggling with card-mod to change the color of an identity card on my dashboard.

I made a virtual sensor:

  - binary_sensor:
      - unique_id: optimalisatie_kleur
        name: optimalisatie kleur
        state: >
          {{ states('sensor.ruis_awt')|float(0) < 5 and states('sensor.ruis_wp')|float(0) < 15 }} 

With the following code of the card:

type: entities
entities:
  - entity: sensor.t_awt
  - entity: sensor.ruis_awt
  - entity: sensor.ruis_warmtepomp
card_mod:
  style: |
    :host {
         color: {{'red' if is_state('binary_sensor.optimalisatie_kleur','on') else 'green'}};
       }

However the color does not change!

[Sir_Goodenough ((SG) WhatAreWeFixing.Today)]

@artstam

    :host {
         color: {{'red' if is_state('binary_sensor.optimalisatie_kleur','on') else 'green'}};
       }

I’m not a frontend guy, but I’m pretty sure entity cards do not accept templates.

[Ildar_Gabdullin]

@artstam

card_mod:
  style: |
    :host {
         color: {{'red' if is_state('binary_sensor.optimalisatie_kleur','on') else 'green'}};
       }

Replace “:host” with “ha-card”.
More card-mod examples: main card-mod thread - 1st post - link at the bottom named “fantastic”.

@Sir_Goodenough

but I’m pretty sure entity cards do not accept templates.

This is card-mod, it supports jinja.

[Mariusthvdb (Marius)]

@artstam

to change the color of an identity card on my dashboard.

not exactly sure what you’re after, but this is what happens if you set the color on the card, is that your goal?

(I’ve not added a template yet, which is easy and only a matter of replacing there. first you make sure to get the right target in the card_mod, and also result )

I mean, you’ve got to realize youre setting the mod to the card as a whole, and not the individual entities.

like this card’s background

type: entities
entities:
  - entity: sun.sun
title: Set color on Sun state
card_mod:
  style: |
    ha-card {
      background: 
        {{ 'red' if is_state('sun.sun','below_horizon') else 'orange'}};
      }