Styles in some custom:card configuration not working with templating in theme

[MetroAffe]

My Home Assistant version: 2024.2.5

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Templating in themes

What I expected to happen: Red background :D

What happened instead: Ignores the configuration which is made directly to the cards

Minimal steps to reproduce:

Theme:

card-mod-card: |
  .type-tile {
    {% if is_state(config.entity, 'on') %}
      background-color: red !important
      {% endif %}
    }

Card (Not part of any hui-tile-card!):

type: custom:mini-graph-card
entities:
  - sensor.schlafzimmer_temperature
card_mod:
  style: |
    ha-card {
      background-color: red !important;
    }

This happens for many other cards too like Atomic-Calender for example. If I remove "config.entity" from templating lines everything works like expected:

card-mod-card: |
  .type-tile {
    {% if 1 %}
      background-color: red !important
      {% endif %}
    }

Error messages from the browser console: Nothing

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]

https://github.com/thomasloven/lovelace-card-mod/issues/180

[MetroAffe]

Well, yes, this does the trick. And I found the error in the protocols now... It helps me a lot, thank you. I struggled for a few hours with it. :D

But I think this can stay open as a reminder to improve the code? Its an error who should be catched right?

[ildar170975]

Not sure if this needs an improvement. This is a whole user-side issue - using a variable which is not defined yet.

[MetroAffe]

I don’t know if this behavior is completely a user-issue because I added the {%templating code%} to a class (type-tile) where every card I used in my view has an entity defined. And for these cards, it was working perfectly with my first version. But somehow some other cards, maybe the custom ones without a working config, will also check this config and throw an error - even though the selector doesn’t select these other ones! In other words: If you will use templating anywhere, every card must have a config. Therefore, please ensure to add this information to the documentation, at least.

I hope you can understand what I mean.

[ildar170975]

If you will use templating anywhere, every card must have a config.

Imho every card does have a config )) This issue (config.entity is undefined) only happens when using in themes (at least in my experience). Have no idea how themes are loaded; may be on some step this code is attempted to be executed when this variable is not defined yet.

[MetroAffe]

Yes and no. In my opinion there are some cards where the entity is configured in some other way:

For examle:

entities:
  - entity: calendar.**
  - entity: calendar.** 
  - entity: calendar.**

And I have some nested cards (mini-graph-card) these were also the ones who don’t work.

Thinking about that I‘m pretty sure thats the problem…

[ildar170975]

In my opinion there are some cards where the entity is configured in some other way:

My words "every card does have a config" are valid. I was not talking about a particular "config.entity" variable. Surely this variable is not defined everywhere and not supposed to. It is written in the Docs that you can use a "config" variable - it was not promised that "config.entity" is always & everywhere available. Surely in this example "config.entity" is not available:

type: entities
entities:
  - sun.sun
card_mod:
  style: |
    ha-card { ... now try using config.entity ... }

[MetroAffe]

Okay yes 👍🏻 So there are cards with „empty“ config.. But why is it needed to check the config of all cards if templating were used in themes for just one type? There is probably the case for improvement. But of course this is definitely not needed! My „problem“ is solved. With some more configuration a workaround is possible. So as I said. I would recommend to add this Information to the documentation..

[ildar170975]

So there are cards with „empty“ config..

It is not "empty config". The config.entity does not exist here, nothing else.

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: sun.sun
    title: some title
    card_mod: &ref_card_mod
      style: |
        ha-card {
          {% if config.title == 'some title' -%}
            color: red;
          {% elif config.title == 'some title xxx' -%}
            color: yellow;
          {%- else -%}
            color: cyan;
          {% endif-%}
        }
  - type: entities
    entities:
      - entity: sun.sun
    title: some title xxx
    card_mod: *ref_card_mod
  - type: entities
    tittle: xxx
    entities:
      - entity: sun.sun
    card_mod: *ref_card_mod
  - type: entities
    entities:
      - entity: sun.sun
    card_mod: *ref_card_mod

I would recommend to add this Information to the documentation..

Just create a PR with edited docs.