2022.12 Color states are broken/unusable

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

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

cool.
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
    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.

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.

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?

image

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

Or in documentation or in release notes or …

How can I change the colors of the lock with latest changes?

  state-lock-active-color: "#ff8000"
  state-lock-jammed-color: "#F44336"
  state-lock-locked-color: '#4CAF50'
  state-lock-locked-color: '#4CAF50'
  state-lock-unlocked-color: '#ff8000'
  state-lock-pending-color: "#FF9800"

@piitaya This is great, but we need a way to suppress the defaults from the theme. I am trying to have a simple colour scheme with just a colour for state-active-color and one for state-inactive-color (applying to all entities across the board).
But this just doesn’t work well because there are dozens of overrides in the default theme for various domains and states which take priority.

I case someone thinks “what is that Picture-Elements” card he is so upset about?

Here is how my main dash board looks like. 99% of all interaction we do with HA is done on this single view

Left side are all the sensors. Right side is where we control things.

1 Like

You should be able to reset the variable you want using initial keyword.
(e.g. state-fan-active-color: initial)

For one second I thought this is our Dashboard. I have mostly the same ground plan (I mean: black walls, even Windows and doors are drawn quite similar - oc not the placement). Also most of your Icons are the same.

AND: We’re also using 99% of the time this one dashboard.

My problem is foremost lights with brightness control that are “white on white” when set to 100% brightness.

I’m disappointed that there is a) no easy way to adjust that (who’s thinking that white is a good color for 100% brightness lamps (even if someone consider a dark theme in general) and b) that even with hand stands like this above, it’s not possible to change the current behavior in all cases.

I mean, like… nearly 700 replies to this topic just is an statement somehow, isn’t it?

Thank you @KennethLavrsen also for pointing out, that there isn’t even a reliable documentation for that.

Ok, but even assuming that works, I’ll have to set over 40 properties to initial in my theme, and then make sure for each release every month that my list matches the list defined in the default theme.

And also, the system doesn’t even seem to work globally, for example climate and media_player entities (which are documented as working) don’t appear to pick up state-inactive-color. They seem to instead use --paper-item-icon-color, wasn’t that supposed to be deprecated?