2022.12 Color states are broken/unusable

@piitaya do I need to be concerned about changes related to Picture Elements Card?

In Picture Elements we are many that set both on and off state colours on individual entities

I am actually not that concerned about the colours used in entity cards etc. It is my picture elements cards that I am extremely sensitive

In December release the css names of the on state changed but the off state remained like it was


  - entity: cover.kitchen_curtain
      '--rgb-state-cover-color': 255, 152, 0
      '--paper-item-icon-color': green
      left: 44%
      top: 4%
      action: toggle
    type: state-icon

If CSS names change also for off state - then I am personally OK with having to fix my setup - as long as it is documented what the new names are and referenced in release note

Can you please tell me how can i add this js file and where? :heart:

See reply 617 in this thread from 4 days ago

I went for changing the default theme

  state-alarm-armed-color: '#F44336' # Red
  state-alarm-arming-color: '#FF9800' # Orange
  state-alarm-disarmed-color: '#4CAF50' # Green
  state-alarm-pending-color: '#FF9800' # Orange
  state-alarm-triggered-color: '#F44336' # Red
  state-alert-color: '#F44336' # Red
  # Header:
  app-header-background-color: rgb(17, 17, 17)
  app-header-text-color: rgb(198, 203, 210)
  app-header-selection-bar-color: var(--primary-color)
  app-header-edit-background-color: rgb(136, 136, 136)
  # Main Interface Colors
  primary-color: rgb(138, 180, 248)
  primary-background-color: rgb(17, 17, 17)
  secondary-background-color: rgb(28, 28, 28)
  divider-color: var(--primary-background-color)
  accent-color: var(--primary-color)
  # Text
  primary-text-color: rgb(242, 242, 242)
  secondary-text-color: rgb(166, 166, 166)
  text-primary-color: var(--primary-text-color)
  disabled-text-color: rgba(184, 190, 199, 0.4)
  # Sidebar Menu
  sidebar-icon-color: rgb(68, 115, 158)
  sidebar-text-color: rgb(198, 203, 210)
  sidebar-background-color: rgb(28, 28, 28)
  sidebar-selected-icon-color: rgb(138, 180, 248)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # Buttons
  paper-item-icon-color: rgb(68, 115, 158)
  paper-item-icon-active-color: rgb(138, 180, 248)
  mdc-button-outline-color: rgb(138, 180, 248)
  # States and Badges
  state-icon-color: var(--paper-item-icon-color)
  state-icon-active-color: var(--paper-item-icon-active-color)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: rgb(138, 180, 248)
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  # Labels
  label-badge-background-color: var(--secondary-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: rgb(208, 101, 104)
  label-badge-green: rgb(128, 200, 132)
  label-badge-blue: rgb(138, 180, 248)
  label-badge-yellow: rgb(223, 194, 113)
  label-badge-gray: rgb(95, 98, 103)
  # Cards
  card-background-color: rgb(28, 28, 28)
  ha-card-background: rgb(28, 28, 28)
  ha-card-border-color: rgb(42, 43, 46)
  paper-dialog-background-color: var(--card-background-color)
  paper-listbox-background-color: var(--card-background-color)
  paper-card-background-color: var(--card-background-color)
  # Switches
  switch-checked-button-color: rgb(138, 180, 248)
  switch-checked-track-color: rgb(138, 180, 248)
  switch-unchecked-button-color: rgb(172, 176, 185)
  switch-unchecked-track-color: rgb(154, 160, 166)
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  # Dropdowns
  material-background-color: var(--table-row-background-color)
  material-secondary-background-color: var(--table-row-alternative-background-color)
  mdc-theme-surface: var(--secondary-background-color)
  # Pre/Code
  markdown-code-background-color: rgb(17, 17, 17)
  code-editor-background-color: rgb(17, 17, 17)
  # Checkboxes
  mdc-checkbox-unchecked-color: rgb(68, 115, 158)
  mdc-checkbox-disable-color: var(--disabled-text-color)
  mdc-select-fill-color: rgb(42, 43, 46)
  mdc-select-ink-color: var(--primary-text-color)
  mdc-select-label-ink-color: var(--secondary-text-color)
  mdc-select-idle-line-color: var(--primary-text-color)
  mdc-select-dropdown-icon-color: var(--secondary-text-color)
  mdc-select-hover-line-color: var(--accent-color)
  mdc-text-field-fill-color: var(--mdc-select-fill-color)
  # Input
  input-fill-color: var(--secondary-background-color)
  input-dropdown-icon-color: var(--secondary-text-color)
  input-ink-color: var(--primary-text-color)
  input-label-ink-color: var(--secondary-text-color)
  input-idle-line-color: var(--primary-text-color)
  input-hover-line-color: var(--accent-color)
  rgb-primary-text-color: 68, 115, 158
  rgb-primary-color: 68, 115, 158

Also didn’t work the /local/kenneth-colours.js
idk why…

btw, Arganto, could you please help me out in my quest for hiding some menu items (in card-mod-theme)

trying to zoom into the new Assist icon and remove it:

      mwc-icon-button[title="Helpen"] {
        {% if is_state('input_boolean.hide_assist','on') %}
        display: none;
        {% endif %}

      /* /app-header/app-toolbar/ha-icon-button[2]//mwc-icon-button//button */

or use the aria-label in the button, but cant make it happen…

At the end i went with

Didn’t liked other themes than original HA

would there be any reason the:

state-binary-sensor-active-color: pink

does not work? or state-binary-sensor-on-color: pink for that matter.

either in Glance or entities, using state_color: true

I see frontend/ha-style.ts at bbb9cfb2c25808f880f8c62526cb11010427948c · home-assistant/frontend · GitHub only has state-binary-color set to amber, so I also tried

state-binary-sensor-color: pink

obviously, but even then, the amber remains.

Please give us the on/active off/inactive variants for binary_sensor…

seems a bug when reading Entity state colors theming by piitaya · Pull Request #14831 · home-assistant/frontend · GitHub mentions we can color the binary-sensor on state

The right variable is state-binary_sensor-active-color not state-binary-sensor-active-color because domain use snake case.
Also the variable in default theme should be state-binary_sensor-active-color not state-binary_sensor-color. I will push a fix for that.

1 Like

so a bug and a user-error :wink:

state-binary_sensor-[on/off]-color will work too?

Yes, both work because for binary_sensor active = on and inactive = off.

nice. can confirm to work correctly now.
glad if you could push that fix.

@ piitaya

ALL my colours in my picture element cards are f**ked up again now.

How do I get them back? What are the new names of the CSS I need to use in picture elements card to get the colours defined for individual elements. I asked you directly many days ago what we should watch out for.

I looked at the Picture Elements Card - Home Assistant and it shows

"--paper-item-icon-color": pink

But that only sets the off colour. How do I set the ON colour for an individual icon like before?

I tried with

  - entity: binary_sensor.bed_sensor_diane
    icon: mdi:bed
      'state-active-color': 255,0,0
      left: 85% 
      top: 26%
    type: state-icon

it is ignored. I want the bed red when it is occupied. But I do not want all binary sensors to be red. I only want the bed icon in the picture_elements card to be red. So I cannot just change the theme colours.

This seems to work

  - entity: binary_sensor.bed_sensor_diane
    icon: mdi:bed
      '--state-binary_sensor-active-color': red
      left: 85%
      top: 26%
    type: state-icon

I tried --state-active-color but that does not work. And the old 255,0,0 does not work either.

If this was just bleeding documented instead of me having to spend hours on this. I can accept the change as long as it is documented.

It is… check the docs, it’s listed in the release notes as well as a link.

Here’s the link

1 Like

You can also use state-binary_sensor-occupancy-on-color: red in a theme file so all occupancy binary sensors will be red. You don’t have to define them in every card.

Not for picture-elements card.

The first thing I did was put --state-active-color: red and it did not work.

So then I had to tried without – and with 255,0,0 and nothing worked.

The theme changes are documented. But the picture-elements card still requires more knowledge and it should be documented on the picture-elements card documentation because the documentation that is there is now WRONG

Feel free to open an issue or fix documentation if it’s wrong.
Things evolves and documentation can not be always up to date. I will remove reference to paper item variables in documentation as it’s not supported to avoid confusion.

HI All,

Following this conversation as after last update, my “curtains” are purple again.
I’m not so sure anymore what should be the best way to fix this now ?
Is there a solution yet?


See above in this thread: 2022.12 Color states are broken/unusable - #637 by piitaya

Or in documentation or in release notes or …