Button card - couleur des icônes

Bonjour à tous,

Je suis actuellement en plein test sur des cartes personnalisées via button_card. J’aimerais garder l’identité visuelle des icônes du thème de base mushroom, mais je ne sais quelle est la meilleure façon de procéder via button card. Actuellement, j’ai créé des variables dans button_card_templates et je peux définir les couleurs que je souhaite dans le code de la carte. J’ai donc 2 questions :

  • existe-t-il une liste de toutes les couleurs utilisées dans HA des icônes du thème de base ? Icons + fond (surtout du fond… j’ai l’impression que c’est un pourcentage de l’icône non ?) ?
  • ou alors y-a-t-il un autre moyen pour éviter d’inscrire les valeurs en hex pour toutes les icônes par carte ?

Voilà mes tests, dans l’éditeur de configuration :

button_card_templates:
    styles:
      img_cell:
        - background-color: '[[[ return variables.icon_color_bg ]]]'
      icon:
        - width: 28px
        - color: '[[[ return variables.icon_color ]]]'

et dans mon code des cartes :

  icon_color: red #couleur de l'icône
  icon_color_bg: blue #couleur de fond de l'icône

Les couleurs que je cherche à avoir :
Capture d’écran 2025-02-14 à 13.16.04

Un grand merci d’avance pour votre aide :wink:

Bonjour,
Tu trouveas les couleurs de mushroom ici :
https://github.com/piitaya/lovelace-mushroom/blob/main/src/utils/colors.ts
Celle de home assistant ici:
https://github.com/home-assistant/core/blob/dev/homeassistant/util/color.py

1 « J'aime »

Merci pour ton retour, je trouve déjà pas mal de chose grace à toi. Qu’en est-il pour le fond des icônes ? La partie « claire » ?

Bonjour,
tu peux regarder sur le thème mushroom, tu as les variables utilisées :

Bonjour à tous,

Un truc que je n’arrive pas à comprendre, c’est que ce code fonctionne :

  icon_color: rgba(var(--rgb-accent-color),1)
  icon_color_bg: rgba(var(--rgb-accent-color),0.2)

Mais pas celui ci :

  icon_color: rgba(var(--rgb-green-color),1)
  icon_color_bg: rgba(var(--rgb-green-color),0.2)

Merci pour votre aide.

Bonjour,

C’est simplement car rgb-accent-color est défini dans le thème, contrairement à rgb-green-color

1 « J'aime »