Changer le pied de page (footer) suivant l'état d'une entité

Et voici comment faire si tu ne veux utiliser qu’une seule image et appliquer un niveau de gris sur l’image.

Cela te permet de n’utiliser que card-mod et plus card-templater (plus besoin de gérer une secondes images) :

type: entities
entities:
  - entity: sensor.boite_aux_lettres_heure
    name: 'Dernière Distribution à :'
    icon: 'mdi: null'
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
  - entity: sensor.boite_aux_lettres_jour
    name: Le
    icon: 'mdi: null'
    style:
      hui-generic-entity-row:
        .: |
          div{font-weight: 600;font-size: 1.3em}
        $: |
          state-badge{ display: none;}
          div{text-align: right; }
state_color: true
show_header_toggle: false
footer:
  type: picture
  image: /local/icones/boite-aux-lettres.jpg
  tap_action:
    action: call-service
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.boite_aux_lettres
  hold_action:
    action: none
style:
  hui-picture-header-footer:
    $: |
      {% if is_state('input_boolean.boite_aux_lettres','on') %}
        .clickable{
          filter: grayscale(1);
        }
      {% endif %}

animate