Style icon color based on state

[shut blaze]

I've found several solutions to change a icon color in lovelace based on a entities state, but I can't get it to work on light entities and other entities that give certain icon colors by themselve.

Ideally, I would like to the lights, media_players, etc. icons behave like binary_sensors: a certain color for off state and a certain color for on state. I don't want to see a blue icon when my lights turn blue.

What works now is:

- entity: light.light_group_living_room
  name: false
  state_color: false
  toggle: true
  styles: 
    --paper-item-icon-color: '#ffc107'
  icon: mdi:lightbulb

This will set the icon's color, but not dynamically. I believe I can't use jinji templating here to change the color based on the state. I've tried to replicate this 'solution' by using card_mod (so I can using templating to determine the color based on state), but haven't been able to figure it out yet.

Home Assistant docs point out to using '--state-light-on-color' but this doesn't seem to work.

Preferably, I would like to replicate the solution to the other 20 lovelace buttons, but I have no idea how to make the code small and re-usable (don't check specific entity-ids but use self() functions).

Anyone here to give me a start in the right direction?

[shut blaze]

According to this docs page (https://github.com/Mariusthvdb/custom-icon-color/blob/main/CARD-MOD-EXAMPLES.md) this code should work:

- entity: light.light_group_living_room
  name: false
  state_color: false
  toggle: true
  card_mod:
    style: |
      :host {
        --paper-item-icon-color:
            {% set currentstate = states(config.entity) %}
            {{'blue' if currentstate == 'on' else 'black'}};
      }

But nothing happens (icon color is like its off), while using 'styles' the css value is correctly used.

[shut blaze]

This is the problem I'm facing. I want the fan, tv and light icons in the same color as the rest if they are 'on'

[shut blaze]

So, I've found some code which allows me color the icon like I want, but only for the entities card left icon. This is the code I put in my theme:

  card-mod-row-yaml: |
    "hui-generic-entity-row $ state-badge $": |
      ha-state-icon[data-state="on"] {
        color: var(--paper-item-icon-active-color) !important;
        filter: none !important;
      }

However, it's not targeting the right icons correctly, because it is in the multiple-entity-row.

In Chrome Dev Tools I see the JS path to a random icon on the right side:

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > grid-layout").shadowRoot.querySelector("#root > hui-card:nth-child(11) > state-switch").shadowRoot.querySelector("#root > div.visible > hui-entities-card").shadowRoot.querySelector("#states > div:nth-child(7) > multiple-entity-row").shadowRoot.querySelector("hui-generic-entity-row > div > div:nth-child(4) > div > state-badge").shadowRoot.querySelector("ha-state-icon").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")

But I'm not sure how to convert the theme..