2022.12 Color states are broken/unusable

[Mariusthvdb (Marius)]

reading that now, this is so not what we expected from the dev blog… its basically the same as in the release notes and certainly not what was promised here. Or, what I was expecting from it (go as technical as needed):

There are many different types of users of Home Assistant (Home Assistant Design). Only the people that create their own themes are interested in seeing the variable changes. The other people are not interested in this. By adding it to the dev blog we can go as technical as needed without creating noise in the release notes for majority of users that do not create themes.

And noteworthy dev blogs are always linked in the release notes too

[PiotrNDM]

Same in my HA dashboards. All my motion sensors and door/window sensors use only dark blue (no move; closed state) and blue color (motion detected and door/window open). Why you make this kind of “improvement”? Can we go back in some way to previous view?
Regards to All of You Guys!

[Lemonadel]

Thank you for ruining my HA appearance on DEFAULT THEME DARK

Who came with idea to force change colors from the ones we were able to set in theme in settings to this madness?

Where is tutorial to change it, where is information in breaking changes about it?

Why not pink, magenta, dirt color like your bright ideas of forcing changes not enabling them after switch ?

Edit:
I have no F idea where to change it because nowhere there is setting to change it. Accent color is not this one.

Nothing in configuration.yaml nothing in ui-lovelace.yaml nothing created in themes.

Really how I have to open deep files using File Editor if deepest path is /configuration?!

[mobile.andrew.jones (Andrew Jones)]

Right?
The contrast between on and off is absolutely terrible, and quite surprising after the State of Open Home had that talk on the importance of accessibility. Those of us with good eye sight are struggling to see the difference between on and off right now - people with poor eye sight, will be finding this change near impossible to use.

[petro]

I don’t understand this toxic behavior. People have been asking for years for the ability to set colors for states on entities and in themes. The very first iteration of this ability is added and the initial response is to go from 0 to 100 on the anger scale? It’s the first step, relax. Change your theme for the time being. Calmly post things things that should be updated.

There is no reason to get bent out of shape with the level of anger in this thread so far, this is a work in progress.

EDIT: This is a general response to everyone that posts about the colors, I’m not trying to single you out Andrew.

[Lemonadel]

Then please tell where to change them ?
Which file is having them and why it’s not in themes, configuration.yaml or somewhere else where people are keeping configuration?

I have ugly UI would fix it in no time if I had this information. Instead there is a note that logs and history have new colors, you install new Update and boom something is different.

Best regards

[petro]

There are posts above that describe what values to change in your themes.

[spacegaier (Philip Allgaier)]

All those colors can be themed. There were multiple posts already here in the thread about it. You just need to scroll up a bit.

Here you can see the current list in the coding: frontend/ha-style.ts at b581b95d9d2a90134f9680a6230c51d664375c7e · home-assistant/frontend · GitHub

[prof7bit (Bernd K.)]

I can not find the colors for “off” and “unavailable” (switches, binary sensors) in that file, or also the “not_home” in the history graph bar chart. “Off” appears like “unavailable” now and this is completely counterintuitive. I tried to change it with overrides like this (using the extra_module_url trick):

(This does NOT work)

document.documentElement.style.setProperty('--state-off-color', '#ff0000');
document.documentElement.style.setProperty('--rgb-state-off-color', '255, 0, 0');

or even

document.documentElement.style.setProperty('--rgb-state-switch-off-color', '255, 0, 0');

And also a lot of variations thereof, even tried to dig through the changed typescript code in the frontend that introduced this new behavior to see how the variable name is constructed, but I cannot find it, it is too convoluted for me with too many indirections.

I cannot change the color of “off”, nor can I change the color of “unavailable”.

Can you help?

[Ildar_Gabdullin]

@Mariusthvdb

As with the other colors in my earlier post try the color name without the leading rgb- ?

Have you tried it by yourself since it does NOT work - probably because these vars w/o “rgb-” do not exist here.

type: entities
state_color: true
entities:
  - entity: binary_sensor.test_device_class_heat
    name: heat
  - entity: binary_sensor.test_device_class_heat
    name: heat
    card_mod:
      style: |
        :host {
          --rgb-state-binary-sensor-alerting-color: 0,255,0;
        }
  - entity: binary_sensor.test_device_class_heat
    name: heat
    card_mod:
      style: |
        :host {
          --state-binary-sensor-alerting-color: rgb(0,255,0);
        }
  - entity: binary_sensor.test_device_class_heat
    name: heat
    card_mod:
      style: |
        :host {
          --state-binary-sensor-alerting-color: green;
        }
  - entity: binary_sensor.test_device_class_heat
    name: heat
    card_mod:
      style: |
        :host {
          --state-binary-sensor-alerting-color: '#00ff00';
        }

@Mariusthvdb

You can use the hex colors, they will be translated to rgb.

Again - NOT.
Now I have to use only “255,0,0”, not “red”, not “#ff0000”.
BUT - there is a glitch here with HEX values.
This code does NOT work:

  - entity: binary_sensor.test_device_class_heat
    name: heat
    card_mod:
      style: |
        :host {
          --state-binary-sensor-alerting-color: '#00ff00';
        }

but this THEME works:

test_new_colors_theme:

  # rgb-state-binary-sensor-alerting-color: 0,255,0       # OK
  # rgb-state-binary-sensor-alerting-color: rgb(0,255,0)    # failed
  # state-binary-sensor-alerting-color: rgb(0,255,0)    # failed
  # state-binary-sensor-alerting-color: 'rgb(0,255,0)'    # failed
  state-binary-sensor-alerting-color: '#00ff00'       # OK
  # state-binary-sensor-alerting-color: green    # failed
  # state-binary-sensor-alerting-color: 'green'    # failed

i.e. HEX color is not accepted via card-mod but is accepted in a theme.

Seems that vars w/o “rgb-” like “state-binary-sensor-alerting-color” work ONLY in themes, they cannot be used in card-mod, cannot be edited in Code Inspector.

@Mariusthvdb

Colornames can not be used because the colors are stored for the graphs, and the can not be auto-translated by the system.

Sorry, I do not see a logic here. It was possible earlier, not possible now.
And the only possible reason - using “255,0,0” values as input.

@Mariusthvdb

Yet I was told the majority of people never touch colors, so wouldn’t mind and users like us, customizing colors, we are left to find out ourselves.

Like majority seems do not need precise graphs in more-info.

[prof7bit (Bernd K.)]

Please revert this entire breaking color update, wait until it is debugged and tested before you release. And also please:

• document all the new variables
• announce the breaking change before it happens
• use the old colors we were used to for the defaults
• don’t hardcode any colors (off, unavailable)
• test, test, test, and then test it again.
• then release.

Not the other way around.

Please!

Thank you.

[adorobis]

Sorry, but not everyone is posting in toxic way. Just giving some examples of poor accessibility colors and kindly asking to re-consider/fix them in nice way is not toxic in any way. Please also let us know if you’d rather have it registered as an issue in github.

[petro]

And I’m not addressing everyone. I’m not talking about the people who are being kind. Please reread my post, you’ll see I cover this exact topic.

@petro

Calmly post things things that should be updated.

[adorobis]

OK, so for me the most important is to have bigger difference between active and inactive states for easy recognition on the default dashboards (light and dark modes). Specific color is less important as probably you’ll have as many proposals as number of users

[petro]

Personally, I have no opinion in this matter. I use a unique card where I define the colors. I wasn’t impacted by this change.

[Mariusthvdb (Marius)]

just a quick reply, because I dont like the tone of voice here…

I was talking about theme colors, not about card-mod. Havent run into trouble there.

Yes, I have been using that since the new color scheme and can confirm those to work. As posted.

And yes, because of the adequate and to the point feedback, without emotion, the frontend team has already made some changes. also to the binary classes.

probably some further adjusting has to be done, and it will be done, upon polite and precise feedback

[crzynik (Nicolas Mowen)]

@Ildar_Gabdullin

Have you tried it by yourself since it does NOT work

@Ildar_Gabdullin

Again - NOT.

You keep saying stuff “did NOT work” but you’re using card mod which is entirely different to theme variables. Maybe instead of just telling someone they’re wrong, you ask for more info to understand why it worked for them and not for you.

[Ildar_Gabdullin]

@Mariusthvdb

ust a quick reply, because I dont like the tone of voice here…

That was a “technical tone”, strange that you found smth else.
OK, I spent some time to write a detailed report, do not answer if you don’t want to.

[Ildar_Gabdullin]

@crzynik

You keep saying stuff “did NOT work” but you’re using card mod which is entirely different to theme variables

May be YOU should get to know card-mod better?
This is not only about using a card-mod, this is about a direct access to CSS even w/o card-mod - by Code Inspector & many other ways in cards.

[crzynik (Nicolas Mowen)]

@Ildar_Gabdullin

May be YOU should get to know card-mod better?

I have no reason to use card mod, since the theme variables posted by @Mariusthvdb and others works just fine