2022.12 Color states are broken/unusable

Configuration
650

@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

Example

  - entity: cover.kitchen_curtain
    style:
      '--rgb-state-cover-color': 255, 152, 0
      '--paper-item-icon-color': green
      left: 44%
      top: 4%
    tap_action:
      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

651

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

652

See reply 617 in this thread from 4 days ago

653

I went for changing the default theme

Classic:
  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
  rgb-primary-text-color: 68, 115, 158
  rgb-primary-color: 68, 115, 158
654

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

655

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…

656

At the end i went with

Didn’t liked other themes than original HA

657

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

658

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
659

nice!
thanks.
so a bug and a user-error :wink:

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

660

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

661

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

662

@ 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
    style:
      '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.

663

This seems to work

  - entity: binary_sensor.bed_sensor_diane
    icon: mdi:bed
    style:
      '--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.

664

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

Here’s the link

1 Like
665

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.

666

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

667

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.

668

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?

image

669

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

Or in documentation or in release notes or …