State based styling in picture-elements

Tags: #<Tag:0x00007f77fff04fc8>

Is it possible to do styling on the elements in the picture-elements lovelace card based on the state of an entity?

See below example, I want the state-label to be red when the state is not equal to ‘home’.
This question is also for the image, because it only supports ‘state_filter’, where I need a ‘state_not_filter’ or something like that:

        - type: picture-elements
          style:
            overflow: hidden
          image: /local/images/my_person.png
          elements:
            # Image
            - type: image
              entity: person.my_person
              image: /local/images/my_person.png
              tap_action:
                action: more-info
              state_filter:
                "not_home": blur(5px)
            # State Label
            - type: state-label
              entity: person.my_person
              style:
                left: 0
                bottom: 0
                pointer-events: none
                font-size: 16px
                line-height: 24px
                color: white
                background-color: rgba(0, 0, 0, 0.3)
                width: 100%
                transform: initial
                padding: 0 8px

I use a conditional-element for situations like this.

It’s a little more cumbersome but also very flexible.

Yeah I have thought of that option, but as you said it is pretty cumbersome with a lot of duplicate configuration which I would like to avoid where I can

I’m sure card-mod will be able to do what you’re looking to do.

It can, but it’s a bit tricky.

You can’t just apply styes to elements, because lovelace does that by itself, and I don’t want to mess anything up with card-mod.
However, you can define a css variable on the elements card, and use that in the element style definition.

type: picture-elements
style: |
  ha-card {
    --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
  }
elements:
  - type: state-label
    style:
      color: var(--state-color, red)
      ...etc...

@thomasloven thank you your solution got me on the right track. There was only one weird thing that I don’t understand. This doesn’t work:

    - type: horizontal-stack
      cards:
        - type: picture-elements
          style: |
            ha-card {
              --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
            }
        ...etc

But this does:

    - type: horizontal-stack
      style: |
        ha-card {
          --state-color: "{%if is_state('person.my_person','home')%}white{%endif%}"
        }
      cards:
        - type: picture-elements
        ...etc

Note te placement of the style element. It only seems to work on the horizontal-stack, but not on the picture-elements card. When it is on the picture-elements card however, I do see a quick red flash but then it becomes the default color.

Any idea why?