Errors in log & Code Inspector when using card-mod-theme ('dict object' has no attribute 'entity')

[ildar170975]

My Home Assistant version: 2022.2.9

My lovelace configuration method (GUI or yaml): yaml/storage

What I am doing: Applying styles by card-mod theme. The main idea is to highlight unavailable entities. To simulate an unavailable entity, a template sensor is created.

What I expected to happen: Styles are applied w/o errors.

What happened instead: Styles are applied, there are errors in the log and in the Code Inspector.

Minimal steps to reproduce: 1) Create a theme:

cm_minimal:

  card-mod-row-yaml: |
    .: |

      :host(.class-row-red) {
        color: red;
        --paper-item-icon-color: red;
      }

      hui-generic-entity-row .text-content {
        {% if states(config.entity) in ['unavailable','unknown'] %}
          color: magenta;
        {% endif %}
      }

2) Create a template sensor:

sensor:
  - platform: template
    sensors:
      service_unavailable_value:
        icon_template: mdi:null
        value_template: "{{ 'unavailable' }}"

3) Create a card:

type: entities
entities:
  - entity: sun.sun
  - entity: zone.home
    card_mod:
      class: class-row-red
  - entity: sensor.service_unavailable_value

4) The card looks like:

5) Check that the styles are applied properly. For the unavailable entity the style is applied as below:

6) See errors in the log:

2022-02-20 00:02:45 ERROR (MainThread) [homeassistant.helpers.template] Template variable error: 'dict object' has no attribute 'entity' when rendering ':host(.class-row-red) {
color: red;
--paper-item-icon-color: red;
}
hui-generic-entity-row .text-content {
{% if states(config.entity) in ['unavailable','unknown'] %}
color: magenta;
{% endif %}
}'

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [x] Have made sure I am using the latest version of the plugin.

• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

The same issue was observed while trying to card-mod a fold-entity-row: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1042?u=ildar_gabdullin As a result - the styles was not applied to the fold-entity-row when the theme was active.

[ildar170975]

A possible solution:

Instead of this:

  card-mod-row-yaml: |
    .: |
      hui-generic-entity-row .text-content {
        {% if states(config.entity) in ['unavailable','unknown'] %}
          color: magenta;
        {% endif %}
      }

use this:

  card-mod-row-yaml: |
    .: |
      hui-generic-entity-row .text-content {
        {% if config is defined %}
          {% if config.entity is defined %}
            {% if states(config.entity) in ['unavailable','unknown'] %}
              color: magenta;
            {% endif %}
          {% endif %}
        {% endif %}
      }

Some rows do not have a "config.entity" object probably.