Comment colorer ses icônes pour les débutants? #Tuto débutant N°1

ok merci,
non je ne connais pas trop les thèmes et comment ils marchent,mais c’est vrai que cela peut être intéressant et facilité les changements lorsque l’on en a plusieurs a faire.

Pour expliquer rapidement (n’hésite pas à poser des questions par la suite) :

Quand tu est sur la page d’accueil de HA, dans la barre latérale, tout en bas, tu as ton logo et ton identifiant de connexion :
image

Une fois que tu as cliqué dessus, cela t’emmène dans la page de ton profil :

et si tu parcours les options, tu trouve la partie Thème.

Par défaut tu as aucun choix :

Mais si tu va dans ton fichier configuration.yaml, que tu ajoute :

frontend:
  themes: !include_dir_merge_named themes/

Que tu va prendre des thèmes ici, ou ou encore

Que tu copies les fichiers nom_du_theme.yaml dans le dossier themes
(dossier qui dois se situer au même niveau que le fichier configuration.yaml)

Et que tu redémarre HA, tu auras maintenant tous ces choix de thèmes :
image

Tu peux t’inspirer des thèmes des liens afin de créer le tiens.

Moi le thème de base me convient déjà pas mal, donc j’ai fait un thème où dans le fichier mon_theme.yaml je ne met que les éléments que je souhaite modifier où utiliser dans mes templates cards ou capteurs.

Du coup, mon thème utilise toutes les valeurs du thème principal sauf celle que je renseigne dans mon fichier yaml…

Je sais pas si c’est clair donc n’hésite pas.

C’est juste une courte introduction pour les thèmes car je trouve qu’ensuite le maintient du code est plus aisé.

Oui tu as raison ! :+1:

Mais comme le git n’est pas intégré dans HACS de façon native, il est prévu de mettre à jour l’article concernant HACS afin de parler des intégrations de n’importe quel git compatible HA :
https://hacf.fr/installer-ajouter-integrations-customisations-avec-hacs/

Bonne remarque ! :heart:

Pour les plus impatients (le lien copié est le dépot du git : GitHub - Mariusthvdb/custom-ui: Add templates and icon_color to Home Assistant UI):

HS: @cob94440 Si tu as d’autre remarques, n’hésite pas à t’inscrire su discord dans la section #annonces afin de participer au grand brainstorming qui arrive… :wink: :brain:

Clemalex, j’ai créé un fichier customize.yaml
Mais je dois le rajouter en include dans configuration.yaml non?
Je n’en avais pas à la base puisque je passe par des packages

Oui, il faut qu’il apparaisse dans configuration.yaml :

homeassistant:
  customize: !include customize.yaml

Ensuite, tu peux très bien t’en servir partout si tu es en configuration packages.

re,

j’ai essayer ça dans customize, mais sans résultats

switch.douchex2_switch:
  assumed_state: true
  icon: mdi:lightbulb
  icon_color: if (state === 'on') return 'red'; return 'green';
switch.douchex4_switch:
  assumed_state: true
  icon: mdi:lightbulb
  paper-item-icon-color: lightgreen
  paper-item-icon-active-color: red

Je te propose de relire mes explications car tu ne l’utilise pas comme je l’indique

Salut,
j’ai bien lu et appliqué de 1 à 13
j’arrive à mettre la couleur que je veux soit par la config personnalisation soit par customize

Changement, comme depuis le début, de couleur on/off pour les lights, mais pas de changement de couleur sur les switchs entre on et off

Merci

Peux tu partager la configuration des interrupteurs (switch) que tu mets dans le fichier customize.yaml ?

Salut,

j’ai trouvé la solution dans lolelace card :
J’ai coche « icônes de couleurs basées selon l’état ? »

et comme par miracle les switch réagissent comme les lights

image

dans customize j’ai mis tous les switch comme celui là

switch.douchex2_switch:
  assumed_state: true
  icon: mdi:lightbulb

@Clemalex merci pour ta patience

1 « J'aime »

@Argonaute :
c’est pas que ça garde les types originaux mais tu modifies l’entité elle-même et partout dans HA, indépendamment de la carte que tu affiches car tu attaques l’entité (donc ça fonctionne dans les carte native).

1 « J'aime »

Bonjour,
J’utilise une carte « entities » pour la commande d’un volet.
Par défaut, il y a une icône pour chaque état (ouvert, fermé).
Lorsque je change l’icone via l’interface « entity customizations » (pour mettre mdi:xxxx) je ne peux sélectionner qu’un seule icône donc impossible d’avoir une icone pour chaque état du volet. Comment faire ?

C’est ici que ça ce passe :wink:

Suis les instructions et profite des exemples de codes, il y en a pour les icon: :+1:

J’ai lu mais je me perds avec les solutions proposées, d’ailleurs le sujet débute par « des d’icones qui ne changent pas de couleur ».
Je n’ai pas ce problème, tout fonctionne sauf que pour les icones « volet ouvert » et « volet fermé », je voudrais des icones différentes de ceux implémentées par défaut (en conservant le changement de couleur)

Tu installes custom-ui, et tu utilises l’exemple du point 13. Bonus où il y a un exemple du changement d’icônes…

     #Suivant l'état de plusieurs entités
     #
     sensor.temperature_salon:
       templates:
         friendly_name: Température Salon
         icon: if (entities['input_select.chauffage_salon'].state === 'Off') return 'mdi:power';
           if (entities['input_select.chauffage_salon'].state === 'Eco') return 'mdi:weather-night';
           if (entities['input_select.chauffage_salon'].state === 'Confort') return 'mdi:fire';
           if (entities['input_select.chauffage_salon'].state === 'Hors-gel') return 'mdi:snowflake-alert';
           if (entities['input_boolean.heating_room_salon'].state === 'off') return 'mdi:weather-night';
           if (entities['input_boolean.heating_room_salon'].state === 'on') return 'mdi:fire';
           else return 'mdi:help-circle';
     ##############################################################################
     

Bonjour à tous!
Tout d’abord merci @Clemalex car grâce à ce tuto j’ai réussi à faire quasiment tous ce que je voulais faire hormis une chose (question surement pas lié au tuto) .
Je m’explique :
Pour mes volets roulants (intégration en LocalTuya), j’ai bien mes retours d’état quand je monte et descend mes volets, donc pas de souci pour changer icône et/ou couleur pour cela mais au bout de 30 secondes (délai de mon bouton descente ou monter) cela pas dans un état ‹ unknown ›.
Capture
La question est donc:
Comment faire pour que mon icône de volet garde la dernière valeur connu ( ‹ closing › ou ‹ opening › ) hormis ‹ unknown › ?

Du coup quand il passe unknown le volet est représenté ouvert ?

Non il reprend son icône d’origine
Capture1
Capture2

Le mieux est de passer par un binary_sensor pour sauvegarder l’état si tu solutionnes pas l’état inconnu…

Ouvre un sujet pour le problème :+1:

Merci pour ta réponse.
Je vais approfondir mes recherches et ouvrir un sujet si je trouve pas. :wink: