Thanks Olivier for your tip! But what should happen after pressing F12? I am on a Apple Mac using Google Chrome. Sorry for all my questions. I am very new to that.
Ooch, it will be difficult to explain.
This F12 is supposed to show you a sidebar to navigate through the elements of the page. Like this:
In my exemple, I’m looking at this element in my picture-item
And you can see the style that I applied in the configuration as well as the transformation.
Looking at what I have, there is no --paper-item-icon-color element anymore. However, there is a color: tag but reaching it in CSS could be hard to tell.
Thanks for the tip! Seems to be valid, was valid before too. I guess it was overwritten by the new shiny new state colors coming with Home Assistant 2022.12.0
The issue is, it is not because you see it that it is used by the card anymore.
If the HA team decided to look at another element of the theme to colorize the icon, you’ll have it in your CSS but it will simply be ignored.
What I did in the past to find out was to use a different theme, pick the color of the item, look inside the yaml of the theme to try to determine which of the tag was used and try.
As an exemple, I’ve a theme called midnight.
When I look at a knob, I see that the color is #DF4C1E
Looking inside the midnight.yaml, I can deduce that it is one of the following tag that is used to colorize the knobs:
accent-color: '#DF4C1E' # Accent color
google-red-500: '#DF4C1E'
dark-primary-color: 'var(--accent-color)' # Hyperlinks
light-primary-color: 'var(--accent-color)' # Horizontal line in about
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
either because it is referencing the color directly, or because it is a indirect reference to the --accent-color
And, indeed, it is there, it is the paper-slider-knob-color so I can change it in the style with
'--paper-slider-knob-color': rgb(255,0,0)
But in your case, as it is now linked to the color in the history, I doubt that it is an element of the theme anymore.
So, you’ll have to use card-mod to go through the CSS, until you reach the color tag for that specific icon and change it that way.
But that will be a question to ask in the card-mod topic then.
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