Color Picture-item-icon How can I change the on color of my state icons

Breaking news, you’re not the only one !
Have a look here

Yes.

The 2022.12.x breaks the DOCUMENTED way to define state colours in Picture-Elements card

The --paper-item-icon-active-color no longer works.

You have to replace it by the new css variable which can be hard to find. They are all on this list

In your example the item you want to control is an input_boolean so it would be --rgb-state-input-boolean-color is my guess

EDIT: And yes, it all sucks!

1 Like

Nothing worked so far. Can still change the ‘–paper-item-icon-color’: But not the ‘–paper-item-icon-color-active’: Tried to substitute ‘–paper-item-icon-color’: with several of the above shown examples, but the dirty yellow color of active state stays!

You are right it sucks!

Remember to refresh cache in browser when you change css. Control F5. I was bitten by this when I was fighting to get it to work again

1 Like

What did work then?

maybe, this does help?
Just copied all color options from Home Assistant Design

html {

  --primary-text-color: #212121;
  --secondary-text-color: #727272;
  --text-primary-color: #ffffff;
  --text-light-primary-color: #212121;
  
  --disabled-text-color: #bdbdbd;
  
  --primary-color: #03a9f4;
  --dark-primary-color: #0288d1;
  --light-primary-color: #b3e5fC;
  
  --accent-color: #ff9800;
  --divider-color: rgba(0, 0, 0, .12);
  --scrollbar-thumb-color: rgb(194, 194, 194);
  
  --error-color: #db4437;
  --warning-color: #ffa600;
  --success-color: #43a047;
  --info-color: #039be5;
  
  --card-background-color: #ffffff;
  --primary-background-color: #fafafa;
  --secondary-background-color: #e5e5e5;
  
  --header-height: 56px;
  
  --label-badge-red: #DF4C1E;
  --label-badge-blue: #039be5;
  --label-badge-green: #0DA035;
  --label-badge-yellow: #f4b400;
  --label-badge-grey: #9e9e9e;
  
  --state-icon-color: #44739e;
  --state-on-color: #66a61e;
  --state-off-color: #ff0029;
  
  --state-home-color: #66a61e;
  --state-not_home-color: #ff0029;
  
  --state-unknown-color: #606060;
  
  --state-idle-color: #7990a3;
  
  --state-climate-auto-color: #008000;
  --state-climate-eco-color: #00ff7f;
  --state-climate-cool-color: #2b9af9;
  --state-climate-heat-color: #ff8100;
  --state-climate-manual-color: #44739e;
  --state-climate-off-color: #8a8a8a;
  --state-climate-fan_only-color: #8a8a8a;
  --state-climate-dry-color: #efbd07;
  --state-climate-idle-color: #8a8a8a;
  
  --energy-grid-consumption-color: #488fc2;
  --energy-grid-return-color: #8353d1;
  --energy-solar-color: #ff9800;
  --energy-non-fossil-color: #0f9d58;
  --energy-battery-out-color: #4db6ac;
  --energy-battery-in-color: #f06292;
  --energy-gas-color: #8E021B;
  --energy-water-color: #00bcd4;
  
  --dark-divider-opacity: 0.12;
  --dark-disabled-opacity: 0.38;
  --dark-secondary-opacity: 0.54;
  --dark-primary-opacity: 0.87;
  
  --light-divider-opacity: 0.12;
  --light-disabled-opacity: 0.3;
  --light-secondary-opacity: 0.7;
  --light-primary-opacity: 1.0;
  
  --rgb-primary-color: 3, 169, 244;
  --rgb-accent-color: 255, 152, 0;
  --rgb-disabled-color: 189, 189, 189;
  --rgb-primary-text-color: 33, 33, 33;
  --rgb-secondary-text-color: 114, 114, 114;
  --rgb-text-primary-color: 255, 255, 255;
  --rgb-card-background-color: 255, 255, 255;
  --rgb-red-color: 244, 67, 54;
  --rgb-pink-color: 233, 30, 99;
  --rgb-purple-color: 156, 39, 176;
  --rgb-deep-purple-color: 103, 58, 183;
  --rgb-indigo-color: 63, 81, 181;
  --rgb-blue-color: 33, 150, 243;
  --rgb-light-blue-color: 3, 169, 244;
  --rgb-cyan-color: 0, 188, 212;
  --rgb-teal-color: 0, 150, 136;
  --rgb-green-color: 76, 175, 80;
  --rgb-light-green-color: 139, 195, 74;
  --rgb-lime-color: 205, 220, 57;
  --rgb-yellow-color: 255, 235, 59;
  --rgb-amber-color: 255, 193, 7;
  --rgb-orange-color: 255, 152, 0;
  --rgb-deep-orange-color: 255, 87, 34;
  --rgb-brown-color: 121, 85, 72;
  --rgb-grey-color: 158, 158, 158;
  --rgb-blue-grey-color: 96, 125, 139;
  --rgb-black-color: 0, 0, 0;
  --rgb-white-color: 255, 255, 255;
  --rgb-state-default-color: 68, 115, 158;

  --rgb-state-alarm-armed-color: var(--rgb-red-color);
  --rgb-state-alarm-arming-color: var(--rgb-orange-color);
  --rgb-state-alarm-pending-color: var(--rgb-orange-color);
  --rgb-state-alarm-triggered-color: var(--rgb-red-color);

  --rgb-state-alert-color: var(--rgb-red-color);

  --rgb-state-automation-color: var(--rgb-amber-color);

  --rgb-state-binary-sensor-alerting-color: var(--rgb-red-color);

  --rgb-state-binary-sensor-color: var(--rgb-blue-color);

  --rgb-state-calendar-color: var(--rgb-blue-color);

  --rgb-state-camera-color: var(--rgb-blue-color);

  --rgb-state-climate-auto-color: var(--rgb-green-color);
  --rgb-state-climate-cool-color: var(--rgb-blue-color);
  --rgb-state-climate-dry-color: var(--rgb-orange-color);
  --rgb-state-climate-fan-only-color: var(--rgb-cyan-color);
  --rgb-state-climate-heat-color: var(--rgb-deep-orange-color);
  --rgb-state-climate-heat-cool-color: var(--rgb-amber-color);
  --rgb-state-climate-idle-color: var(--rgb-disabled-color);

  --rgb-state-cover-color: var(--rgb-purple-color);

  --rgb-state-fan-color: var(--rgb-cyan-color);
  --rgb-state-group-color: var(--rgb-amber-color);
  --rgb-state-humidifier-color: var(--rgb-blue-color);
  --rgb-state-input-boolean-color: var(--rgb-amber-color);
  --rgb-state-light-color: var(--rgb-amber-color);

  --rgb-state-lock-jammed-color: var(--rgb-red-color);
  --rgb-state-lock-locked-color: var(--rgb-red-color);
  --rgb-state-lock-pending-color: var(--rgb-orange-color);

  --rgb-state-media-player-color: var(--rgb-indigo-color);

  --rgb-state-person-home-color: var(--rgb-green-color);
  --rgb-state-person-zone-color: var(--rgb-blue-color);
  --rgb-state-remote-color: var(--rgb-blue-color);
  --rgb-state-script-color: var(--rgb-amber-color);

  --rgb-state-sensor-battery-high-color: var(--rgb-green-color);
  --rgb-state-sensor-battery-low-color: var(--rgb-red-color);
  --rgb-state-sensor-battery-medium-color: var(--rgb-orange-color);
  --rgb-state-sensor-battery-unknown-color: var(--rgb-disabled-color);

  --rgb-state-siren-color: var(--rgb-red-color);
  --rgb-state-sun-day-color: var(--rgb-amber-color);
  --rgb-state-sun-night-color: var(--rgb-deep-purple-color);
  --rgb-state-switch-color: var(--rgb-amber-color);
  --rgb-state-timer-color: var(--rgb-amber-color);
  --rgb-state-update-color: var(--rgb-green-color);
  --rgb-state-update-installing-color: var(--rgb-orange-color);
  --rgb-state-vacuum-color: var(--rgb-teal-color);

  --rgb-badge-person-home-color: var(--rgb-state-person-home-color);
  --rgb-badge-person-zone-color: var(--rgb-state-person-zone-color);
  --rgb-badge-person-not-home-color: var(--rgb-red-color);

  --input-idle-line-color: rgba(0, 0, 0, 0.42);
  --input-hover-line-color: rgba(0, 0, 0, 0.87);
  --input-disabled-line-color: rgba(0, 0, 0, 0.06);
  --input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
  --input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
  --input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
  --input-fill-color: rgb(245, 245, 245);
  --input-disabled-fill-color: rgb(250, 250, 250);
  --input-ink-color: rgba(0, 0, 0, 0.87);
  --input-label-ink-color: rgba(0, 0, 0, 0.6);
  --input-disabled-ink-color: rgba(0, 0, 0, 0.37);
  --input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
  --material-h6-font-size: 1.25rem;
  --material-small-font-size: 0.875rem;
  --material-caption-font-size: 0.75rem;
  --material-button-font-size: 0.875rem;
  --state-icon-error-color: var(--error-state-color, var(--error-color));
  --state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));
  --sidebar-text-color: var(--primary-text-color);
  --sidebar-background-color: var(--card-background-color);
  --sidebar-selected-text-color: var(--primary-color);
  --sidebar-selected-icon-color: var(--primary-color);
  --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
  --switch-checked-color: var(--primary-color);
  --switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
  --switch-checked-track-color: var(--switch-checked-color, #000000);
  --switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
  --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
  --slider-color: var(--primary-color);
  --slider-secondary-color: var(--light-primary-color);
  --slider-track-color: var(--scrollbar-thumb-color);
  --label-badge-background-color: var(--card-background-color);
  --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8);
  --paper-listbox-background-color: var(--card-background-color);
  --paper-item-icon-color: var(--state-icon-color);
  --paper-item-icon-active-color: var(--state-icon-active-color);
  --table-header-background-color: var(--input-fill-color);
  --table-row-background-color: var(--primary-background-color);
  --table-row-alternative-background-color: var(--secondary-background-color);
  --paper-slider-knob-color: var(--slider-color);
  --paper-slider-knob-start-color: var(--slider-color);
  --paper-slider-pin-color: var(--slider-color);
  --paper-slider-pin-start-color: var(--slider-color);
  --paper-slider-active-color: var(--slider-color);
  --paper-slider-secondary-color: var(--slider-secondary-color);
  --paper-slider-container-color: var(--slider-track-color);
  --data-table-background-color: var(--card-background-color);

The link provided by @KennethLavrsen should help you.
As I said, if you identify the color code of your unwanted orange

      --rgb-orange-color: 255, 152, 0
      --rgb-deep-orange-color: 255, 87, 34;

or

      --energy-solar-color: #ff9800

for exemple.
It will be easy to identify what is using it

      --rgb-state-alarm-arming-color: var(--rgb-orange-color)
      --rgb-state-alarm-pending-color: var(--rgb-orange-color)
      --rgb-state-climate-dry-color: var(--rgb-orange-color)
      --rgb-state-lock-pending-color: var(--rgb-orange-color)
      --rgb-state-sensor-battery-medium-color: var(--rgb-orange-color)
      --rgb-state-update-installing-color: var(--rgb-orange-color)
      --rgb-state-climate-heat-color: var(--rgb-deep-orange-color);

Therefore, you just have to try the one in the list.
It is not the only list, there is also styles.ts but probably not relevant for your case.

Found the Solution here: I dislike the 2022.12 Color changes - #165 by robertwigley

Sorry, we confused you. We are trying to find what you should put in

    '--paper-item-icon-color': rgb(10,200,20)
    '--paper-item-icon-active-color': rgb(255,0,0)

for it to work and display your rgb(255,0,0)
We know from the other post that this has changed.
So, you have to replace --paper-item-icon-active-color with something else, probably one of the rgb variables above, did you try the guess of @KennethLavrsen ?

I did a test to determine the color that you want to change, it is everything using rgb-amber-color
So, if Kenneth’s advise is not working, try to replace '--paper-item-icon-active-color' with one of this list:

      --rgb-state-automation-color
      --rgb-state-climate-heat-cool-color
      --rgb-state-group-color
      --rgb-state-input-boolean-color  # most likely, as Kenneth said
      --rgb-state-light-color
      --rgb-state-script-color
      --rgb-state-sun-day-color
      --rgb-state-switch-color
      --rgb-state-timer-color

Remember that the cache is a very important thing for HA, it might be necessary to clear it after each change in your configuration.

I’ve added the color options to my “Outline” Theme, which has been created with the UI changes the Team did in 2022.11 release to restore the default Theme.

With some exceptions, the State Color is the default in this theme:

Exceptions are:

  • Cover entities
  • Person / Location Devices (home, in zone)
  • lock entities (inverted states: locked => green, unlocked => red)
  • alarm devices like sirens, etc. (alarm => red)

I will try to extend this a bit further… maybe, the alarm devices can also be green when Idle / inactive, etc…
And maybe, some door / window sensors can also be applied with more color states (open / closed / tilted)

1 Like

Hi Chris,
Are you able to share the code that has changed these colors and where to paste that code. I have been going all over and with this breaking paper-icon change there is no simple example just to change entities state color. Appreciate if you could please share your file

Hi, are you using a custom theme?

if yes, you can put the new colors into the yaml file of your theme directly, like shown in this example:

# https://github.com/ChristophCaina/home-assistant-theme-outline
outline-edge (no shadows):

  # new Custom Colors:
  state-cover-open-color: '#4CAF50' # Green
  state-cover-opening-color: '#4CAF50'
  state-cover-closed-color: '#2196F3' # Blue
  state-cover-closing-color: '#2196F3'

  state-automation-active-color: '#4CAF50' # Green
  state-automation-inactive-color: '#F44336' # Red

  state-lock-jammed-color: '#F44336' # Red
  state-lock-locked-color: '#4CAF50' # Green
  state-lock-pending-color: '#FF9800' # Orange
  state-lock-unlocked-color: '#F44336' # Red

  state-sensor-battery-high-color: '#4CAF50' # Green
  state-sensor-battery-low-color: '#F44336' # Red
  state-sensor-battery-medium-color: '#FF9800' # Orange
  state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)

  state-switch-on-color: '#4CAF50' # Green
  state-switch-off-color: '#F44336' # Red

  state-climate-auto-color: '#4CAF50' # Green
  state-climate-cool-color: '#2196F3' # Blue
  state-climate-dry-color: '#FF9800' # Orange
  state-climate-fan-only-color: '#00BCD4' # Cyan
  state-climate-heat-color: '#FF5722' # Deep Orange
  state-climate-heat-cool-color: '#FFC107' # Amber
  state-climate-idle-color: '#8A8A8A' # Off (Mid-Grey)

  state-person-home-color: '#4CAF50' # Green
  state-person-not-home-color: '#9E9E9E' # Grey
  state-person-zone-color: '#2196F3' # Blue

  state-siren-on-color: '#F44336' # Red
  state-siren-off-color: '#4CAF50' # Green

  state-binary_sensor-window-off-color: '#4CAF50' # Green
  state-binary_sensor-window-on-color: '#F44336' # Red

  state-binary_sensor-door-off-color: '#4CAF50' # Green
  state-binary_sensor-door-on-color: '#F44336' # Red

  state-binary_sensor-lock-off-color: '#4CAF50' # Green
  state-binary_sensor-lock-on-color: '#F44336' # Red

If you are using the default theme from HomeAssistant, I would use the configuration.yaml or a seperate file like this:

# Frontend-Config (Themes)
frontend:
  #javascript_version: latest
  themes:
    my_theme:
      state-cover-open-color: '#4CAF50' # Green
      state-cover-opening-color: '#4CAF50'
      state-cover-closed-color: '#2196F3' # Blue
      state-cover-closing-color: '#2196F3'

      state-automation-active-color: '#4CAF50' # Green
      state-automation-inactive-color: '#F44336' # Red

      state-lock-jammed-color: '#F44336' # Red
      state-lock-locked-color: '#4CAF50' # Green
      state-lock-pending-color: '#FF9800' # Orange
      state-lock-unlocked-color: '#F44336' # Red

      state-sensor-battery-high-color: '#4CAF50' # Green
      state-sensor-battery-low-color: '#F44336' # Red
      state-sensor-battery-medium-color: '#FF9800' # Orange
      state-sensor-battery-unknown-color: '#8A8A8A' # Off (Mid-Grey)

      state-switch-on-color: '#4CAF50' # Green
      state-switch-off-color: '#F44336' # Red

      state-climate-auto-color: '#4CAF50' # Green
      state-climate-cool-color: '#2196F3' # Blue
      state-climate-dry-color: '#FF9800' # Orange
      state-climate-fan-only-color: '#00BCD4' # Cyan
      state-climate-heat-color: '#FF5722' # Deep Orange
      state-climate-heat-cool-color: '#FFC107' # Amber
      state-climate-idle-color: '#8A8A8A' # Off (Mid-Grey)

      state-person-home-color: '#4CAF50' # Green
      state-person-not-home-color: '#9E9E9E' # Grey
      state-person-zone-color: '#2196F3' # Blue

      state-siren-on-color: '#F44336' # Red
      state-siren-off-color: '#4CAF50' # Green

      state-binary_sensor-window-off-color: '#4CAF50' # Green
      state-binary_sensor-window-on-color: '#F44336' # Red

      state-binary_sensor-door-off-color: '#4CAF50' # Green
      state-binary_sensor-door-on-color: '#F44336' # Red

      state-binary_sensor-lock-off-color: '#4CAF50' # Green
      state-binary_sensor-lock-on-color: '#F44336' # Red

Thanks Chris for your reply.
I actually want a very simple solution either per card or entity

type: entities
entities:
  - entity: sensor.bsh_common_setting_powerstate
    state_color: falae
    style: |
      :host {
        --paper-item-icon-color:red;
        --rgb-state-sensor-color: var(--rgb-green-color);
        --state-sensor-active-color: blue;
      }

as we know the --paper-item.. has been deprecated but that is the only way its partially working (not changing based on state)
image

If we agree that --paper is not to be used then I just want active and not activate states to change icon color as standard with most of the switch sensor HA.
I was hoping if one can just show me what is two lines should I write to change icon color for either of the state. I’ll be happy :slight_smile:

I have gone through following links

but not be able to find a simple statement :frowning:

if you want to change the icon color for a particular entity independent of its state, you could try it with something like this:

–sensor.binary_sensor-on-color: yourcolor;
–sensor.binary_sensor-off-color: yourcolor;

using the same color for on AND off state…

I want the icon color to change based on state, i.e the color be default (standard bluish) but to different color (yellow or orange) when state changes so I tried your solution for my card:

type: entities
entities:
  - entity: binary_sensor.bsh_connected
    name: Diswasher Wifi connection
    state_color: false
    style: |
      :host {
        –sensor.binary_sensor-on-color: orange;
        –sensor.binary_sensor-off-color: blue;
      }

nothing changing :frowning: I’m sure very minor issue that I’m not getting :frowning:

ok. so this is a binary sensor?
what device_class is it?

What exactly do you want to acheive?
Within the theme file you can set the state colors for all entities that are binary_sensors and that particular device_class…

here’s the documentation how to use these…

please provide a bit more, clear information that will be easier to provide support for your case.

device_class: home_connect_alt__settings
icon: mdi:tune
friendly_name: Bosch Dishwasher - Power State

is what I can see in the development tools>states
image
As you can see that it is changing states but don’t know how to simply change the color of the icon to orange based on these states just like the sensor above
image

This sensor is created using HACS for homeconnect for my Bosch dishwasher

I’ve tried an alternate solution on another sensor. However, my preferred option is to to know how to get the above one work ?

image

      - entity: binary_sensor.tp_link_router_wan_status_2
        name: Wan status
        state_color: false
        style: |
          :host {
            {% if states(config.entity)=='on' %}
              --paper-item-icon-color: red;
            {% endif %};
          }

Now with new format what do you propose should I use instead of --paper-item-icon-color: red;
that it would be compatible ? as --rgb-state-sensor-color: var(--rgb-red-color); didn’t work :frowning:
The device_class of this sensor is device_class: connectivity

have you read the documentation which I have linked above?

you can use the following in your themes.yaml:

state-binary_sensor-connectivity-on-color: '#FF9800' # Orange
state-binary_sensor-connectivity-off-color: '#2196F3' # Blue

State Colors with ‘default’ settings for binary sensors:
grafik

state colors after applying the above colors for binary sensors with device class connectivity:
grafik

I got your theme solution, but I don’t want to apply these changes at themes level instead want it at card level.
Any tweak to card code would be helpful

I haven’t used card_mod on entities except on tiles…

card_mod:
  style: |
    .tile
      {
        {% if is_state('sensor.griffsensor_terrassentur_state', 'closed') %}
          --tile-color:var(--green-color);
        {% elif is_state('sensor.griffsensor_terrassentur_state', 'open') %}
          --tile-color:var(--red-color);
        {% elif is_state('sensor.griffsensor_terrassentur_state', 'tilted') %}
          --tile-color:var(--orange-color);
        {% endif %}
      }

Therefore, I cannot provide any option on how to change the icon colors within your card - if you are using entities card or whatever else.

personally, I would prefer the themed option, because then the state_colors are the same for the same device_classes … so all “connectivity” sensors would be red if offline and green when online.
That would make most sense - except in some very rare exceptions where the state might be “inverted”

Anyway - sorry that I cannot provide help on changing the colors only on card level.
You should probably ask that in the Card_mod section here in the forum directly.