{"id":1418,"date":"2023-02-14T16:59:47","date_gmt":"2023-02-14T21:59:47","guid":{"rendered":"https:\/\/www.ebnet.us\/?p=1418"},"modified":"2023-02-14T21:19:09","modified_gmt":"2023-02-15T02:19:09","slug":"home-assistant-how-to-change-icon-color-dynamically-with-config-template-card","status":"publish","type":"post","link":"https:\/\/www.ebnet.us\/index.php\/2023\/02\/14\/home-assistant-how-to-change-icon-color-dynamically-with-config-template-card\/","title":{"rendered":"Home Assistant: How to change Icon color dynamically with Config Template Card"},"content":{"rendered":"\n

For many sensors in Home Assistant<\/a> you may want to change icon color dynamically on your dashboard. Having the icon color turn on or off was not enough for me especially for thermostats. I wanted to use a range of colors to show how extremely cold or hot the temperature was. The way I accomplished this was by using the Config Template Card.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

Installing the Config Template Card<\/h2>\n\n\n\n

Firstly you are going to need to install the Config Template Card. The easiest way is to use HACS<\/a><\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Or you can install manually using this guide<\/a>.<\/p>\n\n\n\n

YAML for dynamically changing icon color<\/h2>\n\n\n\n
type: custom:config-template-card\nvariables:\n  TEMP: states['sensor.blink_front_door_temperature'].state | i\nentities:\n  - sensor.blink_front_door_temperature\ncard:\n  type: custom:mushroom-entity-card\n  entity: sensor.blink_front_door_temperature\n  name: Front Door Temperature\n  icon_color: >-\n    ${TEMP < '0'? 'deep-purple' :TEMP < '20'? 'purple' : TEMP < '32' ? 'indigo'\n    : TEMP < '50' ? 'blue': TEMP < '72' ? 'green': TEMP < '85' ? 'orange':\n    'red'}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
For many sensors in Home Assistant you may want to change icon color dynamically on your dashboard. Having the icon color turn on or off was not enough for me especially for thermostats. I wanted to use a range of colors to show how extremely cold or hot the temperature was. The way I accomplished...<\/p>\n","protected":false},"author":1,"featured_media":1421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[69,25],"tags":[71,70],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-home-assistant","category-software","tag-dashboard","tag-home-assistant"],"featured_image_src":"https:\/\/www.ebnet.us\/wp-content\/uploads\/2023\/02\/Home_Assistant_Logo.svg_.png","author_info":{"display_name":"Ed Brandon","author_link":"https:\/\/www.ebnet.us\/index.php\/author\/bigeb\/"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/posts\/1418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":2,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"predecessor-version":[{"id":1424,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/posts\/1418\/revisions\/1424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/media\/1421"}],"wp:attachment":[{"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ebnet.us\/index.php\/wp-json\/wp\/v2\/tags?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}