# Alteração cor de icons consoante o estado

**URL:** <https://forum.cpha.pt/t/alteracao-cor-de-icons-consoante-o-estado/5976>\
**Category:** Dúvidas\
**Tags:** lovelace, hassio\
**Created:** [1 Dezembro , 2020 22:53 UTC](https://forum.cpha.pt/t/alteracao-cor-de-icons-consoante-o-estado/5976 "2020-12-01T22:53:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rockas](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/r/e495f1/32.png) [@rockas](https://forum.cpha.pt/u/rockas)\
**Post date:** [1 Dezembro , 2020 22:53 UTC](https://forum.cpha.pt/t/alteracao-cor-de-icons-consoante-o-estado/5976/1 "2020-12-01T22:53:26Z")

</div>

Olá a todos, estou a tentar implementar alteração da côr dos icons consoante o seu estado.

Depois da leitura de vários post relativos ao tema, comecei a minha jornada pela instalação dos [Custom-ui](https://github.com/Mariusthvdb/custom-ui) colocando as seguintes configurações.

Originalmente era o [home-assistant-custom-ui](https://github.com/andrey-git/home-assistant-custom-ui)

aparentemente houve um problema já identificado que causava a não alteração da côr, porém apenas coloquei em comment as configurações.

copiar state-card-custom-ui.html and state-card-custom-ui.html.gz para www/custom\_ui)

 ![image](https://forum.cpha.pt/uploads/default/original/2X/1/153e1a26375efbfbb8a2012d0181e703df4401c4.png)

configurar no ui-lovelace.yaml

```auto
resources:
  - type: module
    url: /local/plugins/slider-entity-row.js?v=1
  - type: module
    url: /local/community/lovelace-slider-entity-row/slider-entity-row.js
  - type: module
    url: /local/custom-lovelace/weather-card/weather-card.js
  - type: module
    url: /local/community/mini-media-player/mini-media-player-bundle.js?v=1.11.0
  - type: module
    url: /local/animated-background/animated-background.js
  - type: module
    url: /local/community/mini-graph-card/mini-graph-card-bundle.js?v=0.9.4
  - type: module
    url: /local/community/button-card/card-mod.js
  - type: js
    url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js?v=0.3.2
  - url: /local/plugins/card-mod.js?v=1
    type: module
  - url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
    type: module

```

configuration.yaml

```auto
homeassistant:
####################################################
# #
# Customize #
# #
####################################################
  customize_glob:
    light.*:
      custom_ui_state_card: custom-ui
    cover.*:
      custom_ui_state_card: custom-ui
    sensor.*:
      custom_ui_state_card: custom-ui
    switch.*:
      custom_ui_state_card: custom-ui
    binary_sensor.openclose_8:
      custom_ui_state_card: state-card-custom-ui
      templates:
        hs_color: "if (state === 'Open') return [0, 100, 100];
        else if (state === 'Closed') return [120, 100, 100];"
    customize: !include customize.yaml

frontend:
  themes: !include_dir_merge_named themes
########### CUSTOM UI CONFIG ##############
## extra_html_url:
## - /local/custom_ui/state-card-custom-ui.html
## extra_html_url_es5:
## - /local/custom_ui/state-card-custom-ui-es5.html
  extra_module_url:
    - /local/lovelace/resources/custom-ui/custom-ui.js

```

Comecei o meu teste com um sensor binário da xiaomi _binary\_sensor.openclose\_8_, mas a côr não muda.

 ![image](https://forum.cpha.pt/uploads/default/original/2X/8/8a6848e064fcd9df71d293ad8e75e4b3260e1dbf.png)

Alguma coisa deverá estar a escapar-me.

---

<div class="post-metadata">

**Author:** ![RodolfoVieira](https://forum.cpha.pt/user_avatar/forum.cpha.pt/rodolfovieira/32/14633_2.png) [@RodolfoVieira](https://forum.cpha.pt/u/RodolfoVieira)\
**Post date:** [1 Dezembro , 2020 23:01 UTC](https://forum.cpha.pt/t/alteracao-cor-de-icons-consoante-o-estado/5976/2 "2020-12-01T23:01:56Z")

</div>

Ve se ajuda este [link](https://github.com/thomasloven/lovelace-card-mod)

---

<div class="post-metadata">

**Author:** ![rockas](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/r/e495f1/32.png) [@rockas](https://forum.cpha.pt/u/rockas)\
**Post date:** [1 Dezembro , 2020 23:25 UTC](https://forum.cpha.pt/t/alteracao-cor-de-icons-consoante-o-estado/5976/3 "2020-12-01T23:25:18Z")

</div>

também esse configurado, mas este endereça mais o que pretendo fazer, aplicar um template a todo o domain.  
Sensores por exemplo mudarem para laranja se _Unavailable_, vermelho de _Open_ ou verde se _Closed_