Picture Elements Card state-icon: Change background-color by entity state

Configuration Frontend
1

The following code works fine to set the background-color static to yellow:

  - type: state-icon
    entity: light.kitchen_table
    name: Küchentisch
    icon: mdi:ceiling-light
    style:
      top: 16.5%
      left: 74.7%
      transform: translate(-50%, -50%)
      width: 36px
      height: 36px
      border-radius: 50%
      display: flex
      align-items: center
      justify-content: center
      color: black
      background-color: rgba(255, 215, 0, 0.8)
      mdc-icon-size": 20px

When I try to set the background-color dynamic depending on the entity state nothing works. I´m clueless and hope somebody has a good Idea :slight_smile:

  - type: state-icon
    entity: light.kitchen_table
    name: Küchentisch
    icon: mdi:ceiling-light
    style:
      top: 16.5%
      left: 74.7%
      transform: translate(-50%, -50%)
      width: 36px
      height: 36px
      border-radius: 50%
      display: flex
      align-items: center
      justify-content: center
      color: black
      background-color: |
        [[[ 
          if (states['light.kitchen_table'].state === 'on') {
            return 'rgba(255, 215, 0, 0.8)';
          } else if (states['light.kitchen_table'].state === 'off') {
            return 'rgba(0, 0, 0, 0.3)';
          } else {
            return 'rgba(255, 215, 0, 0.8)';
          }
        ]]]
      mdc-icon-size": 20px
2

You could solve it with a type: conditional — but clearly that is a workaround - there is probably a far sexier solution :slight_smile:

Screenshot 2025-11-09 133258
Screenshot 2025-11-09 1332581899×1695 152 KB

3

Google “picture elements small tutorial” - 1st post - styling dynamically

4

Thanks. With the tutorial all I could see is that dynamically changing this would not work :frowning:

I now have a solution with card-mod:

  - type: state-icon
    entity: light.kitchen_table
    name: Küchentisch
    icon: mdi:ceiling-light
    style:
      top: 16.5%
      left: 74.7%
      transform: translate(-50%, -50%)
      width: 36px
      height: 36px
      display: flex
      align-items: center
      justify-content: center
      color: black
    card_mod:
      style: |
        :host {
          background-color: {% if is_state('light.kitchen_table', 'on') %} 
            rgba(255, 255, 0, 0.4) 
          {% else %} 
            rgba(128, 128, 128, 0.25) 
          {% endif %};
          border-radius: 50%;
        }
5

For better visibility of the elements, here is the comparison with card-mod adjustment and without.

with-cardmod
with-cardmod640×1194 126 KB

without-cardmod
without-cardmod652×1192 118 KB

6

Easy to say “not work” with no your failed code posted.