2022.12 Color states are broken/unusable

But that is the way it is now indeed. Not hard, just a bit more options… per device_class 2022.12 Color states are broken/unusable - #695 by piitaya

Honestly, after some initial extra work, we have never been able to color with so much detail in core

No. As I said. It is a nice feature.

But it is hard to get right. And what delays it is that you are fooled all the time by the browser cache so things that actually worked are not working because you have not done control F5

But yes, I had misread the documentation. The inactive and active only works with domain and not with device_class.

And the reason I tried with open and closed is that this is the state you see in the UI. You have to look at developer tools at the real state values to see that it actually is on and off.

Flexible. But hard.

the rule is pretty simple:

for every binary_sensor - the state is either ON or OFF.
The translation of the value - active / inactive, open / closed, armed / unarmed etc. will be given by the device_class information.

the simplest method would be something like that:

  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

  state-binary_sensor-tamper-off-color: '#4CAF50' # Green
  state-binary_sensor-tamper-on-color: '#F44336' # Red

  state-binary_sensor-plug-off-color: '#F44336' # Red
  state-binary_sensor-plug-on-color: '#4CAF50' # Green

  state-binary_sensor-power-off-color: '#F44336' # Red
  state-binary_sensor-power-on-color: '#4CAF50' # Green

  state-binary_sensor-battery_charging-off-color: '#F44336' # Red
  state-binary_sensor-battery_charging-on-color: '#4CAF50' # Green

  state-binary_sensor-smoke-off-color: '#4CAF50' # Green
  state-binary_sensor-smoke-on-color: '#F44336' # Red
  
  state-binary_sensor-heat-off-color: '#4CAF50' # Green
  state-binary_sensor-heat-on-color: '#F44336' # Red
  
  state-update-off-color: '#4CAF50' # Green
  state-update-active-color: '#FF9800' # Orange

and you can see, that I sometimes have just used the device_class (first two siren)… these colors are currently working just fine for all of my sensors I need atm

2 Likes

I think this is THE culprit that Paul/Devs really haven’t thought through, and it’s not only in regards to “binary_sensors” , the Domain-Thinking is only “applicable” in certain scenarios, and might(will most likely) eventually be broken, by some Vendor(s)

Lets take " switch " vs " light " , i have lights which are actually a switch (on/off) , and switches which are actually lights ( i.e built in/behind wall-switches ) … “binary_sensors” is even more “complicated” they Span a huge variation of functions/measurements/purposes, as well as “sensors”.

So yes im one of “those” ( with own opinions ) who have spend A-lot time lately ( since November ) , changing/rebuilding , rethinking , re-reading … most likely lost some more hair , but most important spend Way too much time , trying to “get back on track” cause of a reason i still don’t get

No-one can ever claim that they have the perfect/oneandonly “solution” for a color-scheme in a “modern” home-automation system , Yes Devs can/need to comply with the “changes” in code-languages etc. etc. but that is so far from what have happened lately.

And when it comes to the colors Red-vs Green , noone can ever claim that it’s safe to “Walk-when-green-Light” , and lock-vs-unlocked is the same, it entirely depends on the specific purpose, and peoples mind, there are some Domain/Devices which are generic(maybe) but that will also change, AND new domains will most like come, sooner than later … true give them a “random” or “most-likely” entity-color (easily change-able, individually and at various levels) as noone can tell which is actually the preferred “default” state … i.e on/off ?, open/close ? home/not_home ? etc. etc.

… And i hope i don’t have to “struggle” again, as i have lately, re-designing my Cards/Views

yep, that would come close.

for me, I need to figure out how to color opening/closing for cover. Suppose those would qualify as active ? :wink:

nope, this works:

  state-cover-open-color: gold #'#ffd700'
  state-cover-opening-color: pink
  state-cover-closing-color: blue
  state-cover-unknown-color: slategrey
  state-cover-inactive-color: maroon #'#008000' #green

where the last can be replaced with cover-closed

Covers seem open/closed and not on/off

They also work at the higher level active/inactive

yeah I tested that, and

  state-cover-closed-color: black
  state-cover-inactive-color: maroon

shows black, so that is the dominant setting

I think I am there now

I have added some device_class settings to my remaining items.

My maibox is now an occupancy device (which kind of makes sense).

I found that it is better to have it gray than green when empty. Like I do with the motion and occupancy sensors.

I now ended up with this js file. I also hard coded the green to the green I like.

document.documentElement.style.setProperty('--state-cover-active-color', 'var(--orange-color)');
document.documentElement.style.setProperty('--state-cover-inactive-color', '#008000');
document.documentElement.style.setProperty('--state-alarm_control_panel-disarmed-color', '#008000');
document.documentElement.style.setProperty('--state-alarm_control_panel-armed_away-color', 'var(--red-color)');
document.documentElement.style.setProperty('--state-binary_sensor-active-color', 'var(--red-color)');
document.documentElement.style.setProperty('--state-binary_sensor-door-off-color', '#008000');
document.documentElement.style.setProperty('--state-binary_sensor-window-off-color', '#008000');
document.documentElement.style.setProperty('--state-binary_sensor-lock-off-color', '#008000');

And with this I eliminated the last needs to set colours in picture-elements because that I do not trust any longer. I spent 3 hours Wednesday night, 1 hour yesterday, and 3 hours today to get back to colours as I want them. And that does not include ranting. That is an extra hour.

I hope I do not need to do that again for a long time.

Nice, But in the context of Dev’s effort in making an easy-default-mainstream looking/working product, then using easy-change-able-Themes, will suddenly become a VERY vital/important part/feature of the Product … And im sure that’s what all/most newcomers eventually wants , After “playing” with Homeassistant a week or 2.
Just look at this Forum, what dominates here ? , integration problems/questions And View/card modifications.
Themes have as long as i have HA, been in the main Config file, So time for Themes/Color-Modifications to be PART, of the official Product, and therefore Documented, not in some “hardtofind” " hardtoread/understand" But linked in …

– Themes (HOWTO)
– Color-Schemes (HOWTO)

Obviously i can’t make these Docs, as i’ve also have hard to understand , not only all changes made reasently, but also the “Flow” that decide where and when to apply the colors

I still cant get alarm proper colors.

Here is what i have tried:

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

alarm_control_panel

2 Likes

ok this does work for home alarm!

  state-alarm_control_panel-armed-color: '#F44336' # Red
  state-alarm_control_panel-arming-color: '#FF9800' # Orange
  state-alarm_control_panel-disarmed-color: '#4CAF50' # Green
  state-alarm_control_panel-pending-color: '#FF9800' # Orange
  state-alarm_control_panel-triggered-color: '#F44336' # Red

But not for office alarm. will keep looking. THANK YOU!

wow, i had this one bookmarked, since about a month ago … i should have “marked it” so i didn’t missed all the Changes made since :slight_smile:

for having lights as switch and switches as lights, I would recommend to use the option to “show as”.
With this, you can easily change the device class of a binary_sensor:

image
image

It still allows you to use both entities, because changing the device_class will just add a new sensor which can be found in the helpers section.

But yes, I agree.
Sometimes, I would also prefer to use another color schema for sensors of the same device class than for others.
But since HA had only one color previously, at the moment this is something I can live with… and let’s see, what the future might bring… ?

given those colors, you only need to swap the armed/disarmed? no need to set the colors to what they are by default

Yes i know , and i did try this “show as” , but as this “re-modelling” started in December, after i had “my colors/cards/settings” for more than half a year, then when i had to “Comply/Change”, i started to also try-out new card’s… so Tile And MushRoom just made it worse … beside my specific Theme …

So i guess i basically made a whole lot more mess , before getting a grip of the changes( which btw also changed again, and again ) , but i do start to see the light at the end ( never end-ing ) of changes, and im glad to go back to HEX, as i was/ did change alot to rgb+(a) as i got the impression that this was the “new” way and “old” HEX was about to be faded-out.
On top of all , i had a custom-theme ( noctis-grey ) which i had modified , so i had to check upon changes made, and apply these manually … but at some point ( to many updates in HACS-quee ) i just clicked them all … yeap, i have had my “fun” lately :laughing:
But happy to see all the Tips n’ Ideas here

I probably know what you mean.
I’ve started “recreating” my HomeAssistant some time ago - and started with a complete new installation and new, clean dashboards.

Just after finishing this, the tile card and color options have been introduced - and also changes on the default theme which I don’t like.

Since then, I am working on small changes, improvements and customizations - replacing old button cards with new tile card options, changing custom colors… but at the moment, I really like these changes - even if it is causing more effort, because these are changes I was looking for for a while now…

1 Like

Yes , i would like to see a more “documented” page in regards to the Tile-Card , in specific ( as it doesn’t seems to be “reconiced” in some cases, in some nested cards, but also in regards to “options” for Tile-Type, as what i’ve seen in Docs (it aint much) , but i.e. “style” options for this, i.e size/color/text etc. … ( not card-mod ) but “native” ha-style-options
EDIT: a simple show_state/hide_state ? , i mean, i see it’s grey/yellow or grey/green , i don’t need to also have a txt telling me on/off

let’s wait how the tile card will improve over time.
I mean - they’ve added “continuesly” new features to it since its release.

And as the devs already pointed out somewhere else: there’s more that should come… (hopefully^^)

1 Like

Yeah, can’t blame them for being on the lazy side, like couch-potatoes like me :grin: