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

[schleeh]

I defined my state icons to get red when on. But now they are orange. I assume it comes with the new version and https://www.home-assistant.io/blog/2022/12/07/release-202212/#shiny-new-state-colors

My pictures-elements-card configuration is still:

 - type: state-icon
    entity: input_boolean.scharf
    style:
      top: 71.0%
      left: 45%
      transform: scale(2.2)
      '--paper-item-icon-color': rgb(10,200,20)
      '--paper-item-icon-active-color': rgb(255,0,0)
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info

But the paper-item-icon-active-color is ignored by HA. I want it red again, because orange is not as good for my overview.

[Olivier1974 (Olivier Toussaint)]

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

is very dependent of the UI indeed.
I don’t have any state-icon in my configuration but can you do a F12 in your browser and check if this is still a valid CSS tag?

[schleeh]

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.

[Olivier1974 (Olivier Toussaint)]

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.

[schleeh]

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

[Olivier1974 (Olivier Toussaint)]

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)

[Olivier1974 (Olivier Toussaint)]

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.

[Olivier1974 (Olivier Toussaint)]

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

[KennethLavrsen]

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

home-assistant/frontend/blob/f1393e5f00690287a78665faf88ca6145d4aaf48/src/resources/ha-style.ts#L136

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!

[schleeh]

@KennethLavrsen

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

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!

[KennethLavrsen]

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

[schleeh]

What did work then?

[CChris (Christoph)]

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);

[Olivier1974 (Olivier Toussaint)]

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.

[schleeh]

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

[Olivier1974 (Olivier Toussaint)]

@CChris

–paper-item-icon-active-color: var(–state-icon-active-color);

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.

[CChris (Christoph)]

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.

GitHub - ChristophCaina/home-assistant-theme-outline-edge: 🎨 Home Assistant...

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)

[ausfas]

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

[CChris (Christoph)]

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

[ausfas]

@Olivier1974

--rgb-state-light-color

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

Card-mod - Add css styles to any lovelace card

Colored checkbox: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). Track with static color, colored track’s border: - entity: input_boolean.test_boolean name: 'colored back (static), colored border' style: hui-generic-entity-row: ha-entity-toggle: $: ha-switch: $: | .mdc-switch .mdc-switch__track { background-color: yellow !important; border-col…

2022.12 Color states are broken/unusable

Thanks to others for doing the hard work. I’ve done a bit of tweaking to include descriptive colours and also remove the duplication for light and dark modes. Also for those who are not familiar with using themes and to try and summarise everything into one place, here are some hopefully simple instructions that everyone should be able to follow fairly easily and save having to read the entire thread if just looking for as close as I feel we can currently get to a solution. Note, as far as I can…

but not be able to find a simple statement