How to Override an Icon's Default Color?

[DE5013 (Darrell Earnshaw)]

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 %};
      }

[DE5013 (Darrell Earnshaw)]

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. (However, one success was that I was able to change the icon based on the state.)

[DE5013 (Darrell Earnshaw)]

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?

[Ildar_Gabdullin]

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”.

[Edwin_D]

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;

[DE5013 (Darrell Earnshaw)]

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.

[DE5013 (Darrell Earnshaw)]

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

[Mariusthvdb (Marius)]

@DE5013

The garage door icon turns purple (or mauve) whenever the door not closed. I want this icon to be red.

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

[Ildar_Gabdullin]

@DE5013

--state-cover-garage_door-open-color: "#ff0000"

  - 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.

[DE5013 (Darrell Earnshaw)]

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.

[Mariusthvdb (Marius)]

@DE5013

just what I wanted

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

[DE5013 (Darrell Earnshaw)]

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.

[Mariusthvdb (Marius)]

@DE5013

if it makes any difference

it most certainly does, taking it out makes the icon follow the state-color of the entity
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

[Ildar_Gabdullin]

@DE5013

No idea why I used the type of simple-entity

Undocumented.
Used only to make “read-only” - for helpers, covers, locks etc.
Same for sensor-entity.

[Mariusthvdb (Marius)]

well, not exactly undocumented: Entities Card - Home Assistant

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

[Ildar_Gabdullin]

@Mariusthvdb

not exactly undocumented

Yes, i recall this recent fix

[Mariusthvdb (Marius)]

Exactly

@Ildar_Gabdullin

Same for sensor-entity

What do you mean here? I can’t find anything on that