I would like to change the color of my room icon background when a lamp is on in that room.
Actually I assume that it should work with the following code under img_cell -Backround, but this doesn’t work
{% if is_state(entity, 'on') %} orange {% else %} grey {% endif %}
Here is the code for my entire room card
type: custom:button-card
name: Living
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: '#Wohnzimmer'
custom_fields:
temp: |
[[[
return ` <ha-icon
icon="mdi:thermometer"
style="padding-right: 5px; width:16px; height: 16px; color: var(--contrast16);">
</ha-icon>` + states['sensor.wohnzimmer_1_1_temperatur'].state + `<span style="font-size:0.5em">°C</span>`
]]]
hum: |
[[[
return ` <ha-icon
icon="mdi:water-percent"
style="padding-right: 5px; width:16px; height: 16px; color: var(--contrast16);">
</ha-icon>` + states['sensor.wohnzimmer_1_1_luftfeuchtigkeit'].state + `<span>%</span>`
]]]
show_label: false
styles:
grid:
- grid-template-areas: '"n i" "temp i" "hum x" '
- grid-template-rows: 1fr min-content min-content min-content min-content
custom_fields:
temp:
- align-self: start
- justify-self: start
- line-height: 24px
- font-size: 24px
- font-weight: 300
- margin: 0 0 0 -20px
hum:
- align-self: start
- justify-self: start
- line-height: 24px
- font-size: 14px
- font-weight: 300
- margin: 0 0 0 -20px
icon:
- width: 32px
- color: black
- opacity: 0.7
img_cell:
- justify-content: center
- margin: '-15px -15px 0px 0px'
- background: '#c5e5ff'
- border-radius: 515px
- width: 100px
- height: 100px
- position: absolute
- right: 0
- top: 0
- z-index: 1
name:
- justify-self: start
- font-size: 18px
- font-weight: 500
- color: var(--contrast20)
- padding: 20px 0
card:
- padding: 0 0 22px 22px