How to style using card_mod: customization in JS not working

have a set of input_booleans in the form of

input_boolean.github_home_assistant for each of the repo’s I follow with my sensors, which have the same object_id’s: sensor.github_home_assistant.

I like to customize_glob these sensors, based on the state of the input_boolean:

    sensor.github_*:
      templates:
        icon_color: >
          var repo = entity.entity_id.split('.')[1];
          if (entities['input_boolean.' + repo].state == 'on') return 'gold';
          return 'steelblue';

which somehow doesn’t work just yet.

anyone can see the error I make?

Believed entity.entity_id.split('.')[1] should be github_home_assistant in this example, leading to

  if (entities['input_boolean.' +'github_home_assistant'].state == 'on') return 'gold';
          return 'steelblue';

which would be

 if (entities['input_boolean.github_home_assistant'].state == 'on') return 'gold';
          return 'steelblue';

which works as desired.

inspector says:

small update, this does work also:

    sensor.github_home_assistant:
      templates:
        icon_color: >
          var id = entity.entity_id.split('.')[1];
          var repo = 'input_boolean.' + id;
          if (entities[repo].state == 'on') return 'gold';
          return 'green';

seems the concatenation in the actual template is an issue, which we can circumvent with an extra step before adding it to the template.

Now testing final step for the customize_glob on all sensor.github_* entities…

well, too bad:

figure this might be a great opportunity to use card_mod on the auto-entities card listing all sensors:

      - type: custom:auto-entities
        card:
          type: entities
          style: |
            ha-card {
              box-shadow: none;
              background: none;
              padding: 0px;
              margin: -20px;
            }
            :host {
              --paper-item-icon-color:
                {% set id = config.entity.entity_id.split('.')[1] %}
                {% set repo = 'input_boolean.' + id %}
                {% if states(repo) == 'on' %} gold
                {% else %} green
                {% endif %}
                ;
            }

but this is not working either… even worse, the paper-item-icon-color template ruins the ha-card template.

anyone with a great hint please?

because your config doesn’t have an entity field…

mm, not sure, how then could the rest of the card work fine, while it too is using config.entity:

        filter:
          include:
            - group: group.github_repos_in_use
              options:
                tap_action:
                  action: more-info
                hold_action:
                  action: navigate #url
                  navigation_path: weblinks
                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = config.entity.object_id %}
                      {% set repo = 'input_boolean.' + id %}
                      {{'gold' if is_state(repo,'on') else 'green'}}
                      ;
                  }
                state: >
                  {% if states(config.entity) != None %}
                    {% if state_attr(config.entity,'latest_release_tag') %}
                    {{state_attr(config.entity,'latest_release_tag')}}
                    {% else %} {{states(config.entity)}}
                    {% endif %}
                  {% else %} Unknown
                  {% endif %}
                secondary: >
                  {% if states(config.entity) != None %}
                    {{state_attr(config.entity,'latest_commit_message')}}
                  {% else %} Unknown
                  {% endif %}
              sort:
                method: name

The only thing I can say is that the style is card mod and the rest is auto-entities. Your configuration for the card (custom:template-entity-row) does not explicitly contain ‘entity’. That is most likely the root of your problem.

you’re probably right of course, but I wouldn’t know what to do now. I hoped that the entity would have been passed or registered somehow, and be useable in the card-mod template.

fwiw, I’ve also tried --paper-item-icon-active-color since that is the active color for template-entity-row: https://github.com/thomasloven/lovelace-template-entity-row#options but it doesn’t help.

fear my only hope is a tag to Thomas…maybe it is not possible at all.

this works:

                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color: red;
                  }

So I know the variable is the right one :wink:

as does the hard coded version:

                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = states.sensor.github_home_assistant.object_id %}
                      {% set repo = 'input_boolean.' + id %}
                      {{'gold' if is_state(repo,'on') else 'green'}}
                      ;
                  }

coloring all sensors now of course, but hey, this is progress :wink:

now how to get it to use the entity of the auto-entities …

even tried it like this:

                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = states(config.entity) %}
                      {% set od = id.object_id %}
                      {% set repo = 'input_boolean.' + od %}
                      {{'gold' if is_state(repo,'on') else 'green'}}
                      ;
                  }

simply wont work

Solved, by Thomas, of course.

config.entity is the entity id, not the state object

see 🔹 Auto-entities - Automatically fill cards with entities - #134 by Mariusthvdb

                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = config.entity.split('.')[1] %}
                      {% set repo = 'input_boolean.' + id %}
                      {% if states(repo) == 'on' %} gold
                      {% else %} green
                      {% endif %}
                      ;

resulting in:

short template version:

                type: custom:template-entity-row
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% set id = config.entity.split('.')[1] %}
                      {% set repo = 'input_boolean.' + id %}
                      {{'gold' if is_state(repo,'on') else 'green'}}
                      ;