Lovelace with state-dependant colors

Configuration Frontend
21

I was simply focus on the card code and didn’t look at the bigger picture. Something like this?

type: picture-elements
elements:
  - type: state-label
    entity: 'light.pc_lights'
    style:
      top: 32%
      left: 40%
    card_mod:
      style: |
        :host {
          color: {{ 'red' if is_state(config.entity, 'on') else 'green' }}
              }
image: /local/your_pic.png
22

What you are doing is:

  • do not define a color by a native “style” option
  • define a color by card-mod.

Alternative way - what I am using and which I recommend:

  • define a color = variable in the native “style”
  • define a variable by card-mod.
23

Gotcha, I’ll try that method.

24

Is this the method you suggested?

type: picture-elements
card_mod:
  style: |
    ha-card {
      {{ '--var:red' if is_state('light.pc_lights', 'on') else '--var:blue' }}
            }
elements:
  - type: state-label
    entity: sensor.basement_sensor
    style:
      top: 32%
      left: 40%
      font-size: 40px
      color: var(--var)
25

@kosakenzipfel, the same code still works in my setup.
First, please make sure config-template-card is used and indentations are correct.

As suggested, using config-template-card may not be the best way.
If this still does not work for you, please consider trying suggestions in other helpful posts here.

26

There are 2 ways:

  1. Declare a variable on a picture-elements card’s level - then this variable may be used for a few elements.
  2. Declare a variable on some element’s level - to use this variable for this element only.
27

Thank you all. It works now :slight_smile: