Personalisation de State Badge

Entraide Home Assistant
1

Bonjour à tous,

J’utilise des state-badge pour afficher la température de mes pièces sur une carte picture-elements.
J’ai personnalisé l’affichage d’un des state-badge en fonction de son statut avec card-mod :

card_mod:
      style: |
        :host {
          --label-badge-text-color:
            {% if states(config.entity) | int <= 18 %} 
              lightblue
            {% elif states(config.entity) | int <= 25 %}
              green
            {% elif states(config.entity) | int <= 29 %}
              orange
            {% elif states(config.entity) | int >= 29 %}
              red
            {% endif %}
            ;
          --label-badge-red:
            {% if states(config.entity) | int <= 18 %} 
              lightblue
            {% elif states(config.entity) | int <= 25 %}
              green
            {% elif states(config.entity) | int <= 29 %}
              orange
            {% elif states(config.entity) | int >= 29 %}
              red
            {% endif %}
            ;
        }

et je souhaiterai l’appliquer à tous mes state-badge sans devoir copier le code sur chacun d’entre eux, est ce possible et comment (template?)?

Merci d’avance de votre retour,
Arno

core-2023.10.3

2

Bonjour,
tu peu uiliser la carte decluttering-card GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace configuration with the help of this card

Sinon, tu peu modifier ton thème avec card_mod et y intégrer ton code.
exemple:

mushroom_noshadow:
  text-divider-color: '#44739e'
  text-divider-line-size: 1px
  text-divider-font-size: 15px
  energy-grid-consumption-color-0: '#FF0000'
  energy-grid-consumption-color-1: '#00b300'
  ha-card-border-width: 0
  card-mod-theme: mushroom_noshadow
  card-mod-card: |
    :host {
      --secondary-text-color: rgb(68, 115, 158);
    }
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #FF0000 !important;
    } 
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #00b300 !important;
    }       
  card-mod-more-info-yaml: |
    .: |
      ha-dialog > div > div {
        padding: 0% !important;
        outline: none !important;
      }
  modes:
    light: {}
    dark: {}