Picture-entity: change mdi icons based on state, what is the working method?

[Ildar_Gabdullin]

@iAR

    card_mod:
      style: |
        ha-card {
          --state-binary_sensor-on-color': green;
          --state-binary_sensor-off-color': red;

This code has typos:

• extra “`” after variables;
• no closing “}”.

@iAR

Change the color for a binary sensor?

Use card-mod: either using css variables like you tried or by a direct access to CSS elements.

@iAR

Change the icon itself for a binary sensor?

1.For template sensors - you may define icons inside a template definition.
Docs

2. Alternatively (and for not-template sensors) - you may try using card-mod and “–card-mod-icon” variable.

@iAR

Change the color for a light (preferably based on the color of the light itself)?

Not tried myself - but probably by card-mod as well.

@iAR

Change the color based on a numeric (of text) value?

Alternatives:

1. Card-mod - to change a color on some particular card.
2. Custom UI (google it) - to change a color everywhere.

Go to the main card-mod thread for details.

Besides, for Picture-elements card it is possible to style colors STATICALLY by using its native “style” option. If you want to style colors dynamically - card-mod, see examples here.