Modifier la couleur d'icone sur un button_card

Bonjour,

Savez-vous comment modifier la couleur de l’icone sur carte bouton ?
voici le code dans customize.yaml :

switch.porte_de_garage_switch:
  templates:
    icon: if (entities['binary_sensor.garage_etat'].state === 'off') return 'mdi:garage';
      if (entities['binary_sensor.garage_etat'].state === 'on') return 'mdi:garage-open';
      return 'mdi:home';
    icon_color: if (entities['binary_sensor.garage_etat'].state === 'off') return '#ff3333';
      return 'blue';

Si je prends une carte entities la couleur change mais pas pour la carte button.

Merci de votre aide

Bonsoir,

Apparemment, custom-ui ne gère pas les cartes button.

Dans ce cas, tu as 2 solutions : utiliser le module card-mod ou utiliser la carte button-card

Quelques explications :

1. Card-mod

card-mod n’est pas une carte mais un outil qui permet de substituer du code css aux cartes de lovelace.

Cet outils très pratique permet la personnalisation complète de tout ce qui se trouve sur le dashboard.

Ci dessous, quelques images provenant du GitHub :
59151697-f46b0700-8a37-11e9-842e-a1088be149b4
image

Par exemple, moi je m’en sert sur la carte alarm_control_panel-card
qui normalement ressemble à ça : image
à ça quand l’alarme n’est pas enclenchée : image
et ça quand l’alarme est enclenchée : image

2. Button card

La carte button card est la carte que personnellement j’utilise le plus dans mon lovelace (voir les images de ma présentation).

Ci dessous, quelques images provenant du GitHub :

all

Par exemple, moi je m’en sert comme ceci :

image ici, que des button-card

6 ici aussi que des button-card même la croix avec le libellé Capteurs.

Beaucoup plus d’imagination sur le forum officiel ici : Button Card


Tous les deux sont disponibles dans HACS :
image
image


Pour en revenir à ton problème :

  • Avec la méthode `card-mod’, cela donne :
type: button
tap_action:
  action: toggle
hold_action:
  action: more-info
show_icon: true
show_name: true
show_state: false
entity: switch.porte_de_garage_switch
style: |
  ha-icon{
    color: {% if is_state('binary_sensor.garage_etat', 'off') %} #ff3333 !important {% endif %};
  }

Ce qui donne : image

  • Avec la méthode `button-card’, cela donne :
color_type: icon
entity: switch.porte_de_garage_switch
name: Garage
show_icon: true
tap_action:
  action: toggle
styles:
  icon:
    - color: |
        [[[
            if ( (states['binary_sensor.garage_etat'].state == 'off') ) return '#ff3333';
            else return 'blue';
        ]]]
type: 'custom:button-card'

Ce qui donne : image

J’espère avoir répondu à ta question.

N’hésite pas si tu as des questions concernant l’une ou l’autre méthode.

2 J'aime

Salut,

comme d’hab tu as la solution, énorme merci pour le temps que tu me consacre, j’ai utilisé card-mod et tout va bien

bonne journée

Heureux de pouvoir contribuer