Picture element icons color

Third party integrations
1

Hi

I have been reading practically every single post in this regard, but i am unable to find a solution.

I am aware i can use this example:

card_mod:
  style: |
    :host {
      {% if states('light.sample') == "off" -%}
      --paper-item-icon-color: black;
      {%- else -%}
      --paper-item-icon-color: green;
      {%- endif %}
    }

The above example works fine, my problem is that my picture element has about 50 light icons
and i have four of these.
setting this up will take a huge amount of code, and managing it later
would be impossible.

Is there any way to set the icon state color globally?
i don’t mind if it changes all over the UI.

Thanks.

2

Hello Yarash,

I bet you can use this…

Also since you are using a custom card that has templates enabled, you could make a custom_template (macro) repeat functions over and over.

3

Can you please give me some more details regarding this cusrom template.

Thanks

4

When I come to think of it
I am sure I can use some regex find and replace
And even easier, probably AI can easily do it

Update:

I have used the github copilot AI, got it to perform the sample above to all entities from all types, worked great.

5