2022.12 Color states are broken/unusable

hacustom · December 17, 2022, 5:40pm

No. I added the custom theme and that worked great on my normal entities! Thank you so much for that.

My entities displayed with template entity row are “uncolored”, they won’t change color on state change. I think it’s because template entity row uses the paper color attribute to change the icon color when active, and that’s gone now from what I understand.

Matthew_Budraitis · December 17, 2022, 5:54pm

For sure, lots in here and many more rabbit trails to follow, but just reading doesn’t show my +1 for making these new colors optional.

Mariusthvdb · December 17, 2022, 8:05pm

back…

using:

      color: >
        {{iif(states[config.entity].state == 'on','red','black')}}

does its job here

(secret: I havent even set active: true…)

hacustom · December 17, 2022, 9:03pm

Just realized that the icons for my living room lamps that are displayed using fold entity row are working perfectly. A bit of hope that what’s working in that addon could be implemented in others.

Ildar_Gabdullin · December 17, 2022, 11:17pm

The “color” is an undocumented and a bit strange option; seems to work with an entity specified.

code

type: entities
entities:
  - type: custom:template-entity-row
    icon: mdi:car
    color: red
  - type: custom:template-entity-row
    entity: sun.sun
    icon: mdi:car
    color: cyan
  - type: custom:template-entity-row
    entity: sun.sun
    icon: mdi:car
    color: cyan
    active: false
  - type: custom:template-entity-row
    entity: sun.sun
    icon: mdi:car
    color: cyan
    active: true

louisp · December 18, 2022, 9:34am

Also having some Entities show the same colour for On and Off - This is a binary_sensor.grid_status

tom_l · December 18, 2022, 10:16am

Upgrade to the latest version and clear your web browser cache.

mekanics · December 18, 2022, 11:33am

Just peeking in. As mentioned, been lazily following this endless debate and I guess, many others too.

What I believe many of us is waiting, is something stable on which we can build and customize our UIs to our liking. Currently most of my UI is themed & customized and because of the change I see it more and more the needed (wasn’t the purpose of this UI change somewhat the opposite?). My UI is somewhat OK because on theming and special cards, but everything based on core defs is not. In a fear that also the variables the themes and cards are using are breaking, I have stopped updating my main installation in 2022.11.5.

Also a large amount of users are using picture elements cards mainly showing the unique floorplans, and css support there is poor. Not even mentioning the manual tinkering needed and especially scalability between viewports. Those needs to be improved also.

Is this current direction optimized to mobiles? I wonder why, they have a ridiculous sized screens and keyboards are even worse. Due to the climate change, energy crisis, remote work etc. we should also reduce our mobility, by the way. If needed to use by phone, I rather pack everything on as small surface as possible, eg. entities cards compared to space-taking tiles and so on.

I recall a document by the ui developers were promised including e.g. new css variables? 2022.12 Color states are broken/unusable - #169 by piitaya

Is that released yet? I think I’ve not come across to that, anyway?

hacustom · December 18, 2022, 5:18pm

I wholeheartedly Agree with you! I like a “dense” dashboard. I really appreciated the consistent and reliable interface, it was easy for family to pick up.

fredrik.chabot · December 19, 2022, 9:07am

The two colours used on the history graph of a motion sensor are almost indistinguishable (different shades of yellow). They used to be red and green. The current colours have almost no contrast and are completely unsuited for this purpose.

Having skimmed through this thread, there seems to be no easy or obvious way to change the colours to something usable/appropriate.

I consider this is a significant regression.

adorobis · December 19, 2022, 9:35am

Are you on the latest version?
That’s how it looks like on default theme:

fredrik.chabot · December 19, 2022, 10:21am

I was on 2022.12.4 but since you asked I updated to 2022.12.7 which is as of this writing the latest version. ~~Colours didn’t change.~~

Schermafdruk van 2022-12-19 11-17-01

The colours did change, but not right after the update.

Schermafdruk van 2022-12-19 11-30-26

While definitely an improvement still not as good as they were before 2022.12, having them configurable would be even better.

tom_l · December 19, 2022, 10:31am

They are configurable. Through themes. See the post marked as the solution to this topic.

marc.forn · December 21, 2022, 10:34am

Please, stop touching this! 7 Hotfix to fix that… If you read my top posts I was supporting the team about the last changes done and calming down the angry people but with every fix you are messing it up more. I’ve spent hours on every hotfix fixing the theme files. Definitely as an engineers we have to understand that this feature deploy has been a mistake as it’s been launched wtihout AB testing and affecting all users. And as all the mistakes in engineers the way to proceed in that case is by a rollback until you have a proper deploy plan for the next release.

This release, that only affects UI really make me question if this project is growing too fast.

Now I have screwed up state-lock-unlocked-color as this color is not added… My god! The colors are added one by one in every hotfix…

markck101 · December 21, 2022, 1:11pm

I have read through this thread about colours in the Dashboard but cannot find an answer to my question, apologies if I’ve missed it - a steer towards the answer would be most welcome.

Otherwise, my Dashboard includes history graphs for two binary sensors: one is the status of a ping that checks if my broadband is up or down; and the other is a Raspberry Pi power status that shows if there is a power error or not.

When I created these history graphs the default colours were fine:

ping on = green (= broadband up), ping off = red (broadband down); and
power error off = green.
I don’t know what colour power error on would have been, I’ve not seen an error yet, but I’m guessing it would have been red.

Perhaps I got lucky with the default colours, but now, after upgrading to 2022.12 I’ve got:

ping on = yellow, ping off = grey; and
power error off = grey.

Please can someone tell me how I can make easy changes - I’m not a programmer - to get back to the colours I used to have for these two sensors?

Many thanks.

tom_l · December 21, 2022, 1:17pm

You can’t change the grey. It is hard coded. You can change the yellow using a theme. See the post marked as the solution to this topic.

pedolsky · December 21, 2022, 2:19pm

For off in History Grapph you have to customize the theme variable rgb-state-inactive-color .

markck101 · December 21, 2022, 2:26pm

Tom,

Thanks for your quick reply.

I had seen that solution but I (perhaps mistakenly?) thought it would set all of my binary sensors to be either amber or red when not off:

“state-binary-sensor-alerting-color: ‘#F44336’ # Red
state-binary-sensor-color: ‘#FFC107’ # Amber”

My two binary sensors work opposite to each other, I’d like one red when off (ping) and one red when on (power supply error).

Can I include actual sensor names in the themes.yaml with different colour options for each sensor?

Thanks again.

KennethLavrsen · December 21, 2022, 2:36pm

If you go creative with picture elements card then you can control the colours of individual entities for both on and off. See my earlier posts where I describe how

hacustom · December 21, 2022, 2:54pm

You are out of luck.