🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

config.entity + mod-card

We use “config.entity” in many places like Entities card, Entity card, Glance card etc - like here:

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge {
                {% if is_state(config.entity,'on') -%}
                  color: red;
                {%- else -%}
                  color: cyan;
                {%- endif %}
              }

Also we can use “config.row.entity” in conditional rows - like here:

type: entities
entities:
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      entity: input_boolean.test_boolean_2
    card_mod:
      style:
        hui-toggle-entity-row $:
          hui-generic-entity-row $: |
            state-badge {
              {% if is_state(config.row.entity,'on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

Now assume we are using mod-card for some row-like card:

decl_test_mod_card_config:
  card:
    type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      entity: '[[ENTITY]]'
      name: some name
    card_mod:
      style:
        multiple-entity-row $:
          hui-generic-entity-row $: |
            state-badge {
              {% if is_state('[[ENTITY]]','on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

The template uses the “ENTITY” variable.
But it also can use “config.card.entity” variable:

            state-badge {
              {% if is_state(config.card.entity,'on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

It can be useful in case of “abstracting” parts of code.