2022.12 Color states are broken/unusable

For me, I agree with this approach . Did you expand on @prof7bit example? Could you add your configuration to this thread? thanks

hi Paul,

since Ive posted a couple of compound posts, and didnt get a conformation, please let me ask here separately:

using the tile card:


with a seemingly ā€˜unavailableā€™ cover

and its more-info, which does use the correct color:

itā€™s not related to the entity/domain, my other posts show the same behavior for different domains.

In other words: Tile card does not use the color scheme the entity should get (and does get in the more-info)

could you please confirm this is acknowledged?

I suggest making this an issue in the frontend

Iā€™ve tried to read through this thread but something Iā€™m not clear on is future plans- I see this noted as the first step towards something, but has it been explained what that is exactly? Iā€™m among others that donā€™t love the new changes (things like some items on/off states are not different enough to see at glance, along with lock default being red which catches my attention at a glance but is the state Iā€™d like rather than a ā€˜concernā€™). Iā€™m glad others have found workarounds and suggestions to mostly revert via theming, but I donā€™t want to be too reactionary. I donā€™t want to create a themes file, modify my configuration yaml, and apply the theme to my users if this is all something that will continue to change or get better over time. Iā€™d mostly just like reassurance that these concerns are heard and the current marked solution in this thread is not a long-term recommendation.

4 Likes

tbh, I am not even sure the marked solution is The solution. It is what?
Its a list of most new color variables probably set to the colors they were before?

That might not even be close to a solution, because before, we couldnā€™t set many of these at all.
What I fear a bit, is that with this ā€˜solutionā€™ people who didnt use themes before, dont really understand whatā€™s changing, either with the new 2022.12 frontend, or with that Classic theme.

I am all for educating users, so they can create their frontend as much as possible to their liking, understanding the structures on which that frontend is built.

My post #3 was a fix of my already existing themes. Themes which were meticulously curated, and using the former color variables.

the snippet I posted fixed what had to be fixed, in those themes.

with these new color variables things are way more complex though than only setting those themes. Any card_mod working with the former color variables has to be scrutinized, because they most likely will no longer work correctly.

HA devs dont care about that, and state that time and time again. ā€œWe dont support that, so we dont need to document that either, and its no breaking changes because we didnt support that in the first placeā€ ā€¦

example:

I had a footer mod on a script button:

  - type: entities
    state_color: true
    title: Camera detection
    show_header_toggle: false
    card_mod:
      style:
        hui-buttons-header-footer $ hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: space-evenly;
            height: 50px;
            align-content: center;
            margin: -8px 0px 0px 0px;
            --ha-chip-background-color: var(--primary-color);
            --ha-chip-text-color: var(--card-background-color);
            /*--paper-item-icon-active-color: red;*/
            --secondary-text-color: var(--card-background-color);
          }

and that used the up to then used --paper-item-icon-active-color. turning the button to a red button when the script ran.

I had to take that out, and add the color variable for scripts to my theme:

  state-icon-color: '#636B75'
#   rgb-state-switch-color: 255, 215, 0 #(paper-item-icon-active-color: gold)
  main-on-color: '#ffd700' #255, 215, 0
  state-script-color: '#f00000' # red
  state-switch-color: '#ffd700' # gold
  state-automation-color: '#ffd700'
  state-cover-color: '#ffd700'
  state-fan-color: '#ffd700'
  state-light-color: '#ffd700'
#   state-binary-sensor-color: '#ffd700'
  state-input-boolean-color: '#ffd700'
  state-group-color: '#ffd700'
  state-update-color: '#f44336' #red
  state-person-home-color: '#008000'
  badge-person-not-home-color: '#636B75'
  state-person-zone-color: '#7b68ee' #mediumslateblue
#   state-climate-heat-color: '#800080'
#   state-climate-idle-color: '#000000'

fixed that particular button.

So you see, thereā€™s more to it than a single theme substitute, and we need to understand why/whatā€¦

4 Likes

I am using HA 2022.12.1.
HA in Docker.
My colors for binary sensors are these:


Today on Github one person posted a screenshot where colors for binary_sensors are orange (not red).
He said that this is the latest HA, so I wonder - if anyone else have these icons/graphs of orange?

Can you please explain this WHY, thanks!

1 Like

Hi

You may be surprised.

document.documentElement.style.setProperty('--rgb-state-cover-color', 'var(--rgb-orange-color)');
document.documentElement.style.setProperty('--rgb-state-binary-sensor-color', 'var(--rgb-state-switch-color)');

That is what I needed. 99% of my daily use of HA front end are two picture-element cards (floor plan based) and in those I have defined on off colours for quite many entities.

That was hard work to get then as they were before.

1 Like

he probably refers to some information how the UI of HomeAssistant MIGHT look in the future.
There are some previews / studies that the UI will be somehow look like the mushroom dashboard (nowadays) - but unfortunately, I donā€™t find the link to the study at the moment :frowning:

1 Like

That thing here ?

yes, that was itā€¦ during the Event ā€œState of OpenHouseā€ (?) Paulus has showed some sketches, tooā€¦

Can someone tell me how to fix this on the Picture Elements Card with state-icon
I want the icon to be red when the binary_sensor is off, yellow when on

    - type: state-icon
      entity: binary_sensor.clock_br2
      icon: mdi:clock-digital
      tap_action:
        action: none
      hold_action:
        action: none
      style:
        top: *row_03_1
        left: *column_5
        "--paper-item-icon-color": red

I tried this, but didnā€™t work
ā€˜ā€“rgb-state-binary-sensor-alerting-colorā€™: 255,0,0

Use ā€˜ā€“rgb-state-binary-sensor-colorā€™: 255,0,0

For binary sensors

Thank you, I think Iā€™ve been looking at this too much today. Time to quit

Zones in History

1 Like

@prof7bit

2022.12.5:


// HISTORY CHART BAR: OFF & TILE CARD ICON
document.documentElement.style.setProperty('--rgb-state-inactive-color', '255, 0, 255');

Itā€™s

```

document.documentElement.style.setProperty(ā€™ā€“rgb-disabled-colorā€™, ā€˜255, 0, 0ā€™);

![Bild|535x500](upload://fXDKUCLPp5hpPkOdz9NmKJjESB1.jpeg)

Note, that this will also impact the Tile card:

![Bild|690x96](upload://frBCTmWIfoKYon6mv63pDAIGRVj.jpeg)

hmm, for me --rgb-disabled-color does not have any effect, neither on switches nor on binary sensors, neither in the history nor in the tile card.

(I have updated to 2022.12.3 this morning, hoping for any improvements or removal of these unusable new default colors, but nothing changed at all)

Here is my constructive(!) suggestion to the devs how to get out of this mess in an elegant way and without losing face:

  • leave the ability to configure all these colors in place (it is generally a good idea)
  • remove all the default colors for these new settings and let it (in the absence of these settings) fall back to the old theme coloring mechanism, that way only those who actively decide to change one or two colors for a specific reason can use the new feature and for all others it continues to work as before. Or to say it with fewer words: please make the feature optional, donā€™t force its use on everybody.
13 Likes

Bookmark this link to see Core updates and changes.

struggling to understand what youā€™d want here?

we now have a state-person-zone variable, and that would be/is used for all zones indeed. So, unless you would travel from zone to zone, without traveling to Home/Not Home in between, you might be seeing several concatenated zone blocks in the graph.

What would you be proposing? To have Zones return to random colors? Tbh, this is the one change I am happy about in the new color schemes :wink:

Finally a calmed down history-graph on person trackers. And one we can (almost) fully customize to our liking/theme preferences. (not_home still hard_coded?)
we have distinct colors for home/not_home/zone. What more do we need?

well, have this work really, that would be niceā€¦

  state-person-home-color: '#008000'
  state-person-not-home-color: '#636B75'
  state-person-zone-color: '#7b68ee' #mediumslateblue
  badge-person-home-color: '#008000'
  badge-person-not-home-color: var(--state-person-not-home-color) # '#636B75'
  badge-person-zone-color: '#7b68ee'

now we still have to state the hex or rgb value on the badge and can not reference another var with the same value.

Also, it would be nice if the not_home color in the graph would be theme able and not hard coded. Or at least follow frontend/person_color.ts at 348c3c9787e86df4a655a9e59498eaf1ba05ea2d Ā· home-assistant/frontend Ā· GitHub

and no reason to have the badges do anything differentā€¦

1 Like