Picture elements: Condition-dependent color of a label

Configuration Frontend
1

Hello everyone,

I have another question.

I have created a beautiful picture element map, and in this, my room temperature is also displayed.

I would like to display this in color depending on the condition of the heating (if the heating is on, show the temperature in red / if the heating is off, show it in green).

Currently, the label is kept quite simple:


- type: state-label
    entity: sensor.schlafzimmer_temperatur
    style:
      top: 48%
      left: 42%
      color: green
      transform: scale(1.5)

Can someone tell me if, and if so, how I can implement it?

Thank you very much in advance and have a nice day.

And sorry for my bad English :see_no_evil:

Greetings, Marcel

2

Please check here.
In short:
– define a variable dynamically by card-mod;
– use this variable in “style” option to define a color.

3

Thank you,

I read through all this and tried it for a long time.

Unfortunately without success.

Can you perhaps write this to me for the card?

title: Wohn-Essbereich
type: picture-elements
elements:
  - type: state-label
    entity: sensor.wohnzimmerzieltemperatur
    style:
      top: 36%
      left: 46%
      color: black
      transform: scale(1.0)
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu

Greetings Marcel

4

Show your code with an attempt, we’ll try to fix it.

5

This is my attempt:

title: Wohn-Essbereich
type: picture-elements
elements:
  - type: entities
    entities:
      - entity: input_boolean.fruhschicht
  - type: picture-elements
    style: |
      ha-card {
        {% if is_state('input_boolean.fruhschicht','on') %}
        --my-state-color: magenta;
        --my-transform-style:
        {% else %}
        --my-state-color: cyan;
        --my-transform-style: translate(-50%,-50%)
        {% endif %}
      }
  - type: state-label
    entity: sensor.wohnzimmerzieltemperatur
    style:
      top: 36%
      left: 46%
      color: var(--my-state-color)
      transform: scale(1.0)
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu
6

I think I got it.

title: Wohn-Essbereich
type: picture-elements
elements:
  - type: state-label
    entity: sensor.wohnzimmerzieltemperatur
    card_mod:
      style: >
        :host {

        color: {% if is_state('climate.wohnzimmer_raumklima', 'heat') %} red {%
        else %} green {% endif %};

        }
    style:
      top: 36%
      left: 46%
      transform: scale(1.0)
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.more_info
        data:
          entity: climate.wohnzimmer_raumklima
image: /local/wohnzimmer_neu