So i was making a desktop page for energy and i wanted the Amperage value to color code according to its value.
I tested the code for the card itself and then noticed the icon part would follow. But only if i put in a icon: followed by a - color: in the styles section. without it it would do nothing.
type: vertical-stack
cards:
- type: custom:button-card
name: Energy Usage
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:current-ac
layout: icon_name_state
entity: sensor.current_phase_l1
name: L1
show_state: true
- type: custom:button-card
icon: mdi:current-ac
layout: icon_name_state
entity: sensor.current_phase_l2
name: L2
show_state: true
styles:
icon:
- color:
card:
- color: >
[[[
if (entity.state >= 1 && entity.state <= 4 ) return 'green'
else if (entity.state >= 5 && entity.state <= 8 ) return 'yellow'
else if (entity.state >= 9) return 'red'
else return 'rgb(225,225,225)'
]]]
Could i code further buttons like that (in custom:button-card) or is it a bug and might get changed?
