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.
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)
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 
I have gone through following links
but not be able to find a simple statement 
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 
I’m sure very minor issue that I’m not getting
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
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
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 ?
- 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
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:
state colors after applying the above colors for binary sensors with device class connectivity:
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.