If variable in theme yaml breaks card style

[bymem]

Hi.

When adding a if statement in you'r theme yaml, it breaks the the styling that is already added in the cards style. Example i have this in my card style:

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      padding: 12px !important;
      border-radius: 0px 0px 20px 20px !important;
      background-color: var(--card-background-color);
      margin: -29px -16px 16px -16px !important;
    }

Which give this results

But when i added this line into the them yaml

card-mod-card: |
    ha-card {
      {% if config.entity.startswith('light.') and is_state(config.entity, 'on') %}
        background-color: red;
      {% endif %}
    }

It breaks card styling and results in this result.

[ildar170975]

You are using stack-in-card with some unknown cards and trying to use config.entity - what do you expect then?)) Advice: try using config.entity w/o using themes - you will see where this variable may be used. This variable is defined in some cards/rows only, not everywhere.

[bymem]

You are using stack-in-card and trying to use config.entity - what do you expect then?))

Well i would expect it doesn't break the other styling added to cards, where there is no lighting entities in.

the stack-in-card had no light entities in it, and "shouldn't" be effected by this styling from the theme. The if statement styling does work, and turn every light entity red when they are turned on. But it also have that advert effect of breaking the style of the entities in the 'stack-in-card' and the cards that has styling on it.

[ildar170975]

Try smth like this:

card-mod-card: |
    ha-card {
      {% if config.entity is defined %}
        {% if config.entity.startswith('light.') and is_state(config.entity, 'on') %}
          background-color: red;
        {% endif %}
      {% endif %}
    }

[bymem]

I tip my hat to you.

that did the trick and work, thank you so much.

[ildar170975]

@bymem Please close the issue if it is solved