# Comment colorer ses icônes pour les débutants? #Tuto débutant N°1 **URL:** \ **Category:** Entraide Home Assistant\ **Tags:** interface-lovelace, aide\ **Created:** [Juillet 10, 2020, 12:51 UTC](https://forum.hacf.fr/t/comment-colorer-ses-icones-pour-les-debutants-tuto-debutant-n-1/308 "2020-07-10T12:51:40Z")\ **Posts on this page:** 1\ **Showing post:** 2
**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\ **Post date:** [Août 14, 2020, 9:14 UTC](https://forum.hacf.fr/t/comment-colorer-ses-icones-pour-les-debutants-tuto-debutant-n-1/308/2 "2020-08-14T21:14:58Z")
Bonjour, Depuis quelques versions ([ici](https://www.home-assistant.io/blog/2020/02/05/release-105/#icons-no-longer-change-color-based-on-state)), les icônes ne changent plus de couleur. As-tu la dernière version de CustomUI ? Car depuis les version HA110+, l’ancienne méthode (‹ extra\_html\_url ›) ne fonctionne plus correctement et sera bientôt obsolète. Je viens juste de mettre a jour CustomUI depuis l’ancienne méthode vers la nouvelle et tout fonctionne. > Ce plugin est disponible dans HACS à condition d’ajouter le lien `https://github.com/Mariusthvdb/custom-ui` comme dépôt personnalisé. Sinon sans HACS, voici ce que j’ai fait : 1. Se rendre sur le dépot officiel qui a été donné au [post1](https://forum.hacf.fr/t/comment-colore-ses-icones-pour-les-debutants-tuto-debutant-n-1/308): [CustomUI](https://github.com/Mariusthvdb/custom-ui) 2. Cliquer sur le lien donné dans la partie [Installing is super easy](https://github.com/Mariusthvdb/custom-ui#installing-is-super-easy) 3. Quand vous êtes sur la page de [Custom-UI.js](https://github.com/Mariusthvdb/custom-ui/blob/master/custom-ui.js), cliquez sur le bouton « RAW » pour afficher le contenu javascript. Vous devriez avoir ceci : [Custom-UI\_RAW](https://raw.githubusercontent.com/Mariusthvdb/custom-ui/master/custom-ui.js) 4. Copier/coller ou enregistrer le fichier ( ⚠ depuis le format RAW) dans votre dossier « www » de home assistant (ie: sur raspberry, cela donne « /home/homeassistant/.homeassistant/www/custom\_ui/custom\_ui.js » où j’ai rangé le module dans un dossier portant son nom) 5. Depuis Home Assistant, se rendre à « Configuration » ➡ « Tableaux de bord Lovelace » ➡ puis Onglet « Ressources » 6. Appuyer sur le bouton ➕ en bas a droite de la vue puis renseigner : > ``` > Url: /local/custom_ui/custom_ui.js > Type de ressource: Module Javascript > > ``` ⚠ Remarquez que le chemin « /home/homeassistant/.homeassistant/www/custom\_ui/custom\_ui.js » est devenu « /local/custom\_ui/custom\_ui.js » pour la simple raison que dans Home assistant la référence au dossier « www » se fait par « local » 1. Vider le cache de votre navigateur (CTRL+SHIFT+R pour chrome et firefox) 2. [Ajoutez dans le fichier de configuration](https://www.home-assistant.io/docs/configuration/customizing-devices/) les lignes suivantes (si elles ne sont pas déjà présentes !) : ```auto homeassistant: customize: !include customize.yaml ``` 1. Depuis un gestionnaire de fichier, ouvrir le fichier « customize.yaml » (_**seulement pour changer la couleur d’îcone selon l’état d’une ou plusieurs entités)**_ **9a**. Renseigner une entité et sa couleur d’icône comme ceci: ```auto alarm_control_panel.alarme: templates: icon_color: if ( (state === 'armed_home') || (state === 'armed_away') ) return '#df4c1e'; else return '#0da135'; switch.cuisine_lampes: icon_color: red ``` **9b**. Enregistrer et redémarrer Home Assistant 1. Par Home Assistant, « Configuration » ➡ puis tout en bas « Personnalisation », rechercher le « Nom » de l’entité dont vous voulez modifié la couleur d’icône, puis cliquer sur son « Nom » (J’insiste sur le « Nom » car si vous avez des customisations au niveau des ‹ friendly\_name ›, vous pouvez vite ne pas retrouver l’entité car elle porte son « Nom » suivant son état. 2. Dans la nouvelle vue, cliquer sur « Sélectionnez un attribut à remplacer » puis « Other » 3. Dans les champs qui sont apparu, renseigner de la manière suivante : > Attribute name: icon\_color > Attribute value: red « Attribute value » peut prendre toutes les valeurs css (red, #f00, rgb(255,0,0), etc.) 1. Cliquer sur le bouton « Save » et retourner sur la page lovelace, faite apparaître l’entité dont vous avez changé la couleur et profitez ! 2. Bonus: Voici quelque unes de mes customisations: ```auto #Suivant l'état de l'entité elle-même # sensor.tentative_de_connexion_failed: templates: icon_color: if (state === '0') return '#00ff00'; else return '#ff0000'; ############################################################################### #Suivant l'état d'une autre entité # sensor.essence_carrefour_sp95_price: templates: icon_color: ' if (entities[''sensor.essence_sp95_best_price''].state === ''carrefour'') return ''#18c451''; ' ############################################################################### #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'; icon_color: if (entities['input_select.chauffage_salon'].state === 'Off') return 'darkgray'; if (entities['input_select.chauffage_salon'].state === 'Eco') return 'forestgreen'; if (entities['input_select.chauffage_salon'].state === 'Confort') return 'orangered'; if (entities['input_select.chauffage_salon'].state === 'Hors-gel') return 'deepskyblue'; if (entities['input_boolean.heating_room_salon'].state === 'off') return 'forestgreen'; if (entities['input_boolean.heating_room_salon'].state === 'on') return 'orangered'; else return 'fuchsia'; ############################################################################### #Renvoit la couleur qui est définie par le thème actuellement appliqué # sensor.volet_rue_position: templates: icon_color: return 'var(--primary-color)'; ############################################################################### ``` --- _[View the full topic](https://forum.hacf.fr/t/comment-colorer-ses-icones-pour-les-debutants-tuto-debutant-n-1/308)._