I have a very similar problem to the one posted here, but since I am very new to HA the problem probably sits in front of the screen… I set up the following template for the custom:button-card and try to change the icon color based on the current_position attribute of the awning. The strange thing in my mind is, that the code works fine for the label and the icon but not for the color. Can anyone point me to a solution, why the color property is not accepting the values I pass to it? Any help is HIGHLY appreciated.
template_cover:
styles:
card:
- padding: 5px 5px
- height: 60px
- show_name: true
- color_type: icon
- font-size: 12px
name:
- color: white
- justify-self: center
label:
- color: white
- justify-self: center
- align-self: top
grid:
- grid-template-areas: '"n" "i" "l"'
- grid-template-rows: min-content 1fr min-content
- grid-template-columns: 1fr
img_cell:
- align-self: center
- text-align: center
# state:
# - justify-self: center
# - padding-left: 0px
state:
- value: "open"
color: >
[[[
return (entity.attributes['current_position'] == '100' ? 'red' : 'yellow')
]]]
icon: |
[[[
return (entity.attributes['current_position'] == '100' ? "mdi:window-shutter" : "mdi:window-shutter-alert")
]]]
label: |
[[[
return entity.attributes['current_position'] + ' %'
]]]
- value: "closed"
color: rgb(0,255,70)
icon: mdi:window-shutter-open
label: >
[[[
return "Safe"
]]]
tap_action:
action: more-info
show_label: true
Thanks alot!
EDIT: If I had read all the documentation of the button-card in detail I would have seen the icon color is not templatable… looking for another way of changing the color depnding on state.