Different style depending on state

Configuration
1

Hi

Very new with Home Assistant, discovered it a few hours ago.

I’ve created an image and overlaid some sensors on top of it (copied the card code from the demo site)

type: picture-elements
image: /local/floorplan.png
elements:
  - type: image
    entity: light.living_room_light
    tap_action:
      action: toggle
    image: /local/light_bulb_off.png
    state_image:
      'on': /local/light_bulb_on.png
    state_filter:
      'on': brightness(130%) saturate(1.5) drop-shadow(0px 0px 10px gold)
      'off': brightness(80%) saturate(0.8)
    style:
      top: 12%
      left: 35%
      width: 7%
      padding: 10px
  - type: state-label
    entity: climate.living
    attribute: current_temperature
    style:
      top: 45%
      left: 25%
      background-color: gray
      background: center / contain no-repeat url("/local/ecobee_blank.png")
      text-align: center
      font-size: 12px
      color: white
      font-family: Helvetica
      display: block
      overflow: hidden

This shows the temperature in the room, clicking on the temperature box show the target temperature, and mode of operation.
What I’d like is being able to adapt the style of the text (or the box itself using a different background image) based on the mode of climate.living ;
if text then white if the mode is “heat/cool” and red if mode is “off”

While the image type allow for on/off style
I can’t see a way to do that with the state-label type.

Is this something possible?

Thanks

2

hmm, I think I found it with something like:

  - type: conditional
    conditions:
      - entity: climate.living
        state: heat_cool
    elements:
      - type: state-label
        entity: climate.living
        attribute: current_temperature
        style:
          top: 45%
          left: 25%
          background-color: gray
          background: center / contain no-repeat url("/local/ecobee_blank.png")
          text-align: center
          font-size: 12px
          color: white
          font-family: Helvetica
          display: block
          overflow: hidden
  - type: conditional
    conditions:
      - entity: climate.living
        state: 'off'
    elements:
      - type: state-label
        entity: climate.living
        attribute: current_temperature
        style:
          top: 45%
          left: 25%
          background-color: gray
          background: center / contain no-repeat url("/local/ecobee_blank.png")
          text-align: center
          font-size: 12px
          color: red
          font-family: Helvetica
          display: block
          overflow: hidden

lots of text to duplicate just to change the colour, and I have 10 zones !