Icon color setting does not work. Why?

DimkaInc · February 9, 2021, 12:19pm

Hello!
on HA core-2021.2.2 from docker container, I try use custom color:

type: 'custom:auto-entities'
card:
  title: internet
  type: entities
filter:
  include:
    - entity_id: sensor.internet_ping

When I add style, as it is written in the use of auto-entities, the element immediately disappears. What am I doing wrong or which plugin needs to be installed additionally?

type: 'custom:auto-entities'
card:
  title: internet
  type: entities
filter:
  include:
    - entity_id: sensor.internet_ping
      style: |
        :host {
          --paper-item-icon-color: '#ff0000' ;
        }

tom_l · February 9, 2021, 12:46pm

style requires the use of one of Thomas’s other custom cards:

it is also applied at the card level not the row. So:

type: 'custom:auto-entities'
card:
  title: internet
  type: entities
  style: |
    :host {
        --paper-item-icon-color: '#ff0000' ;
    }
filter:
  include:
    - entity_id: sensor.internet_ping

DimkaInc · February 9, 2021, 12:58pm

There is no effect at all at the line level. Examining the html text, it can be seen that the --paper-item-icon-color is not filled from the parameter, but the default value is taken.

May be problem in docker container?

tom_l · February 9, 2021, 1:46pm

Do you have card mod installed?

DimkaInc · February 9, 2021, 3:33pm

Yes:

lovelace:
  mode: yaml
  resources:
    - url: /local/vacuum-card.js
      type: module
    - url: /local/community/lovelace-auto-entities/auto-entities.js
      type: js
    - url: /local/community/lovelace-card-mod/card-mod.js
      type: module

And HACS say: “Not loaded”. However, module files are present in the installation directories and no errors about the absence of a resource appear. I don’t know how to fix the HACS message. Reinstall don’t fix it.

tom_l · February 9, 2021, 3:37pm

Looks like I was wrong about the row styling. https://github.com/thomasloven/lovelace-card-mod#styling-entity-and-glance-cards

DimkaInc · February 9, 2021, 3:52pm

Does not work:

And --paper-item-icon-color also

tom_l · February 9, 2021, 4:12pm

Try a simple example to see if card mod is actually loaded:

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - sensor.internet_ping

Should have red text for the sensor name.

DimkaInc · February 9, 2021, 4:19pm

Ok. No change:

tom_l · February 9, 2021, 4:31pm

That is not the config I wrote. Forget auto entities for a moment. Just use the entities card so we can check card mod is working. The example I gave above is known to work. Use it and only it in its entirety.

DimkaInc · February 9, 2021, 4:54pm

Custom state color is work:

Static color change generally works, but it is not possible to get dynamic change from state. That’s why I’m trying to use a plugin to get a dynamic color change.

tom_l · February 9, 2021, 6:34pm

Picture elements cards support the use of css styles without card mod.

Entities cards require card mod.

This simple test shows that card mod is not installed correctly.

Also you can not use templates in Lovelace without installing one of the custom template cards. Do you have one installed?

The jinja template card has a large performance overhead. I would not recommend it.

The javascript template card is a better option.

But fix card mod first.

Until you can get this working, card mod is not installed correctly:

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - sensor.internet_ping

DimkaInc · February 9, 2021, 6:40pm

Ok. How I’m correct install card mod?

Reinstall no chage. And:

tom_l · February 9, 2021, 6:43pm

Is the card mod resource correctly set up in the Configuration / Lovelace Dashboards / Resources menu?

DimkaInc · February 9, 2021, 6:48pm

I show it this: Icon color setting does not work. Why?

Perhaps you need to add something else to work correctly?
And, I check on a dynamic map. Can this affect the result?

tom_l · February 9, 2021, 6:52pm

Yes I just told you where to look for that something.

I’m sorry I don’t know what this means.

DimkaInc · February 9, 2021, 6:53pm

Oh. Now it work. Thank you! After install iantrich/config-template-card All work correctly.

DimkaInc · February 9, 2021, 7:01pm

It’s managed here: lovelace/dashboards
I am creating one custom ui-lovelace.yaml file and added an additional toolbar to the system interface for testing. This panel is dynamically populated by the system itself.

drfinn15 · July 7, 2021, 11:17pm

I am so thankful to you, you just made my whole day solving that problem for me. I am so happy to finally have a dynamic color change <3