How to Override an Icon's Default Color?

I have a number of entities (Lamps, Garage Door Covers, Solar Inverter status, etc.) listed as individual entities in an Entities card. In the case of the garage doors and inverter status, using the code below works fine, changing both the icon, text and status to red when appropriate.

However, if the entity is a light (which presumably has some default setting), the text and status change to red, but not the icon color, which turns to yellow.

The example below is a repurposed Hue plug that is now used to switch on/off my water recirculating plug, so itā€™s not really controlling a lamp. From an HA perspective, it thinks it is a light, so itā€™s default ā€˜onā€™ color is yellow. I tried overwriting this (code below), but the ā€˜ā€“paper-item-icon-colorā€™ part does not seem to work correctly (as shown in screen shot at bottom).

Any suggestions on how to fix this?

  - entity: light.water_pump
    type: simple-entity
    tap_action:
      action: call-service
      service: light.toggle
      data:
        entity_id: light.water_pump
    style: |
      :host {
        {% if states(config.entity) != 'off' %}
        --paper-item-icon-color: red;
        color: red;
        {% endif %};
      }

Screenshot 2023-09-13 at 4.14.53 PM

Update: Tried using Switch template in an attempt to ā€˜isolateā€™ the new entity from the Hue plug. When using the new switch entity in the card, the yellow color is still dominant. :frowning: (However, one success was that I was able to change the icon based on the state.)

Screenshot 2023-09-14 at 2.56.07 PM

Renaming the subject line as this appears to be a more fundamental question: Is it possible to override an iconā€™s default color?

I created a test Entities card with just two entities in it: my garage door and a Hue plug (which controls my water recirculating pump).

  • The garage door icon turns purple (or mauve) whenever the door not closed. I want this icon to be red.
  • The Hue plug turns yellow whenever the switch is on. (I also want this icon to turn red.)
  • Theme doesnā€™t seem to play a part, as I have ā€˜No Themeā€™ selected
  • Iā€™ve tried wrapping the Hue plug in a Switch Template - no change, itā€™s still yellow
  • Iā€™ve tried divorcing the plug from my Hue bridge and adding it as a Zigbee ā€˜switchā€™. Guess what? Itā€™s still yellow, so I assume it reads the manufacturer ā€˜Philipsā€™ and decides it must still be a light!)

It appears that the icons for these entities have default colors, but I have no idea where this is set, or how to change them. (Clearly, I want to change them on a per-entity basis - I donā€™t want ALL my Hue light icons to be red.)

Is this even possible, or am I flogging a dead horse?

There are some CSS vars for colors.
Some vars are already defined with some default values (ā€œdefault themeā€).
You may define your own custom theme with some vars to override these particular vars (others will keep using their default values).

Also, you may override these vars for PARTICULAR cards:
ā€“ either by defining some custom theme for this card;
ā€“ or by card-mod - for particular card or particular entity:

type: entities
entities:
  - entity: fan.kitchen #use default colors
  - entity: fan.bathroom #use custom colors
    card_mod:
      style: |
        :host {
          --var_1: ...;
          --var_2: ...;
          --var_3: ...;
        }

But in more-info these colors again will be ā€œnot-overriddenā€.

1 Like

Now sure if it will help or is allowed here, but have you tried adding !important after the color?

  -paper-item-icon-color: red !important;

Thanks Edwin.

However, that didnā€™t make any difference. The icon is still yellow. Almost on the point of giving up.

Thereā€™s got to be a way of overriding the default colors. Iā€™ve scanned all the documentation I can find on the HA side, but nothing addresses this problem.

Thanks, lldar.

I tried what you suggested (below), but that didnā€™t change the garage door from purple to red (as hoped).

type: entities
entities:
  - entity: cover.main_garage
    type: simple-entity
    card_mod:
      style: |
        :host {
          {% if states('cover.main_garage') != 'closed' %}
          --state-cover-garage_door-open-color: "#ff0000"
          {% endif %}
        }
    state_color: true

you can change all state colors in your themes, no need for card_mod, and 100% reliable and supported by core, always preferable to any custom solution, did you have a look at that?
just create a default-adjusted theme, (not as you did I the card_mod) and only change the state-colors in that to your desire, and leave the rest. easy as can be

default_adjusted:

  state-binary_sensor-garage-on-color: var(--alert-color)

would be all it takes for the garage_door binary

  - entity: cover.test_garage_door
    card_mod:
      style: |
        :host {
          --state-cover-open-color: cyan;
          --state-cover-closed-color: lightgreen;
        }
    state_color: true

As I said earlier - to override colors for THIS particular row, otherwise define a custom theme with changed vars to set these colors globally or in particular cards.
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ
ŠøŠ·Š¾Š±Ń€Š°Š¶ŠµŠ½ŠøŠµ

Got it. Many thanks.

Apparently, the option is ā€˜ā€“state-cover-active-color: var (ā€“red-color)ā€™

type: entities
entities:
  - entity: cover.main_garage
    type: simple-entity
    card_mod:
      style: |
        :host {
          {% if states('cover.main_garage') != 'closed' %}
          --state-cover-active-color: var(--red-color);
          color: red;
          {% endif %}
        }

gives me:

Which is just what I wanted.

Many thanks for your patience.

2 Likes

seems a bit more than that, as you asked for overriding the icon color and now color the whole line.

edited
I wasnt aware of the type: simple-entity at all, so learnt something today. Though dont understand what it doesā€¦ yet. nor why this would be required in your specific setting? just use the entity inside the entities card would suffice?
as far as I understand that it is used to set a helper to a read-only value, so you can not control it. A cover isnt a helper, so this apparently also works on non helpers?

btw this explains how these state-colors work, you can use those on the domain and then the state, just as Ildar showed you

Yea, originally I wanted the whole line (text and icon) to be red when the entity was ā€˜activeā€™. The text was relatively easy - it was the icon I was fighting with.

No idea why I used the type of simple-entity. I think I tried it, and it did something I liked, but in the ensuring hassle to get the icon to change color, I forgot what it was. I can try removing it to see if it makes any difference - less clutter in the code, the better.

it most certainly does, taking it out makes the icon follow the state-color of the entity :wink:
also got to remember that state-colors work only on, well whatā€™s in a nameā€™ the state of the entity:

thereā€™s not much use in templating on != closed and then using the state-open color, or even the -active color. Thatā€™s why Ildar doesnt use that either. Overriding the predefined color, requires you to set those state colors in the card_mod, but not templates on any state, just set them the way you like directly

Undocumented.
Used only to make ā€œread-onlyā€ - for helpers, covers, locks etc.
Same for sensor-entity.

well, not exactly undocumented: Entities Card - Home Assistant

I couldnā€™t find that sensor-entity, where is that used? Sounds interesting indeed

Yes, i recall this recent fix

Exactly :wink:

What do you mean here? I canā€™t find anything on that