2022.12 Color states are broken/unusable

True, after my initial “WTH”, i found my my self realizing that my UI was a wast mix of HA-backend, customized theme/themes, ha + custom-cards with random applied templates … and i have been working for years as system-administrator/support for various companies with development units, and my biggest challenge was the web-desiginers and graphic-designiers ( NO Offense to these creative Persons ) , maybe beside the grafics people insisted running on Macintouch) with humongous, manual calibrating CRT monitors :smile: , … i have my own ideas, interests, likes and dislikes … and the Homeassistant/automation industry is still its its cradle, sure ive already spend hours and nights, to get my “setup” (streamlined) again, and this tread have giving me lots of input and good ideas, so i now have “collected” all color-codes/variables(posted here, ha-related) so i know what i will spend the cold dark winter nights with, … cleaning up my mess in my personal configurations

You don’t seem to understand. That was a specific clarification for this release.

There are no significant colour fixes in 2022.12.1

And I have no indications from the front end devs that they admit to have done wrong except for maybe improving contrast a few places.

I see no indication that the harm on picture elements card is acknowledged or addressed

Personally I am annoyed about the generic colour changes but at least you can theme them

What makes me angry is the harm to the picture elements card where I have spent weeks of work getting them right and where I have used the oficially documented recommended method to control colours of individual entities with --paper-item-icon-color.

You cannot just do a global search and replace. You have to hunt down which css var to replace with. It took me 5 hours to get it working again. THAT one makes me angry because I have tried hard to use non-custom components, and only officially documented method to build my primary dash board.

They could have maintained the --paper-item-icon-color at least in picture elements.
OR put a convertion table in the blog post so the fix could have been done in 1 hour instead of 5.

9 Likes

Same. I don’t like them at all.

Set those devices once to “backend-selected” theme. Then you can change this theme by automation. Here is a script I run on HA start. But I suppose you can call the service any time

alias: Set Home Assistant theme at startup
trigger:
  - platform: homeassistant
    event: start
action:
  - service: frontend.set_theme
    data:
      name: mxm_theme

Not ideal though but it works. It comes from a bad idea of storing user configuration for each end-device separately. But this is how it is. Hopefully, the solution presented above helps.

BTW when seeing new cards (in blog), my first impression was it looks like a toy. Too childish.
Some of you compare it to other apps (alexa, hue). Hopefully, I don’t use them. But a serious system should look seriously. Of course, customization is welcomed, to satisfy everyone. But the default look should be cleaner, more balanced, and dedicated for admins, rather than looking like icecream.

7 Likes

I think this would be a good/perfect “feature request”, every user can on every device apply/enable this script(editable) with a press on a button.
i.e
if username=x and device=y >>> apply z

important improvement: the history-graphs got fixed.

btw, this is where all current design colors are displayed in a nice overview.
https://design.home-assistant.io/#misc/entity-state

5 Likes

Oh, my bad. You are correct, I did not realise that this had come about with this release. Let’s hope they reconsider or this is only a short-term clarification until they build this out more fully.

Understood. I’m in the process of moving everything to custom button-card. I should have done so a while ago, but my philosophy has always been to use as much of the native functionality of a system as possible. Apparently, this is a bad approach in this particular case.

I can understand supporting custom themes has been a hassle for the developers, but it’s very unfortunate that they chose to significantly change their direction after so much time is passed. My themes have been working perfectly for more than a year now, until the latest update. The HA team is under no obligation to support legacy features, but it feels a bit like Microsoft saying, “Well, we’ve moved on to x64, so were going to shut down some of the 32-bit parts.”

But I’ll stop whining and go code a little … :wink:

For me it is still a small disaster happened. I have never worked, changed or adapted colours or themes. Now the colours are all over the place and I can’t see my way back. I have no clue where to start or even to look. To get into this will for sure take me hours and hours of trial and error to figure out to restore what I already had. A waste of time and energy.

I have read the documentation on themes but that didn’t bring me any further either.

With all the good things these guys are doing and that list is very very long they have a mishap from time to time creating a storm in the community

7 Likes

And what you said is for me the crux of the issue: The developers seem to missed the fact that their software is not some hobbyist garage project anymore, but it literally drives and controls peoples homes, cameras, alarms etc. and that the changes they think cool might break thousands of peoples dashboard.

I find it very aggravating that a feature rendering the system largely unreadable as to the state of entities is being actively defended as a way forward.

I do not know how to say this in a constructive manner, I just hate what you doing with the look of HA and as a working person with laughably little free personal time I dread every new release of HA since you started “mushroom-ifying” (and don’t give me the spiel it ain’t Mushroom - you hired the guy who made Mushroom to work on ui, and if it looks like Mushroom and it walks like Mushroom it is Mushroom) the ui, as every release means I have to spend hours on end researching and reverting the changes.

I can’t contribute as I am not coder, I pay subscription (that’s not to say it makes me eligible to demand anything) as that is the only support I can give to the project. That leaves me complaining.

19 Likes

Already cancelled mine. Admittedly mostly symbolic since I paid for the year up front. Wish I hadn’t.

I can’t support the lack of respect for users this and other recent changes demonstrate.

10 Likes
style:
  '--rgb-state-switch-color': 0,130,0

This works for people trying to (re)use RGB values.
The reason ‘named’ colors don’t work anymore is because the value is already within the ‘(’ and ‘)’ of the CSS rbg value. (strange choice, but it is what it is)

Once again, there are so many things to be fixed in HA - more important than mushrooming the Lovelace, like:
– more-info with normal graphs;
– a History page with restored functionality to always show required entities;
– normally refreshing history-graphs;
– statistics “5minute” which appeared to be not “long-term”;
– broken picure-elements;
– etc

And what we are doing now - we are fixing our themes, our mods - the 2nd month.

13 Likes

I was told today that using “r,g,b,a” is done due to a need to achieve opacity.
Although the same may be achieved by using rgba(r,g,b,a) and HEX with a proper parsing (as it was noticed earlier by other user).

Can you point me to where this was officially documented? This isn’t sarcasm I genuinely want to know. My understanding was that there were only two things officially supported that themes could change - primary color and accent color. Everything else was undocumented and therefore use at your own risk.

I would also be rather surprised that something with paper in the name was officially supported and documented given paper is an old polymer component set (i.e. a specific implementation detail) and now no longer in use. It’s usually pretty bad practice to use implementation details in names of things that are officially supported since implementation stacks can change.

3 Likes

Good decision.
While I leave my development/experiment dashboards using native GUI (since I don’t use them often) my production dashboards are based 100% on custom button cards.
I call it a GOD CARD.

Here comes a good advise for card-modders: do not use variables, dig into DOM and change CSS properties directly.

Hmm, as for theme-developers - oh, these poor people)))

For those who wants to play with binary sensors of different device_classes - check this test card (use it in Panel mode):

It allows to see icons & graphs.
These device_classes are supported.

Code for the card (auto-entities are required + card-mod to make it compact)
type: horizontal-stack
cards:
  - type: custom:auto-entities
    card:
      type: vertical-stack
      title: input_boolean
    card_param: cards
    unique: entity
    show_empty: true
    filter:
      template: |-
        {% for state in states.input_boolean -%}
          {%- if state.entity_id | regex_match("input_boolean.testing_device_class_", ignorecase=False) -%}
            {{
              {
                'type': 'entities',
                'state_color': true,
                'entities':
                  [
                    {
                      'entity': state.entity_id,
                      'name': state.entity_id.split('testing_device_class_')[1]
                    }
                  ]
              }
            }},
          {%- endif -%}
        {%- endfor %}
    sort:
      method: name
  - type: custom:auto-entities
    card:
      type: vertical-stack
      title: binary_sensor
    card_param: cards
    unique: entity
    show_empty: true
    filter:
      template: |-
        {% for state in states.binary_sensor -%}
          {%- if state.entity_id | regex_match("binary_sensor.testing_device_class_", ignorecase=False) -%}
            {{
              {
                'type': 'horizontal-stack',
                'cards':
                  [
                    {
                      'type': 'entities',
                      'state_color': true,
                      'entities':
                        [
                          {
                            'entity': state.entity_id,
                            'name': state.entity_id.split('testing_device_class_')[1]
                          }
                        ]
                    },
                    {
                      'type': 'history-graph',
                      'show_names': false,
                      'card_mod':
                        {
                            'style': '.content {padding: 0px !important}'
                        },
                      'entities':
                        [
                          {
                            'entity': state.entity_id
                          }
                        ]
                    }
                  ]
              }
            }},
          {%- endif -%}
        {%- endfor %}
    sort:
      method: name
Meta-Code for sensors (place it into Dev tools -> Templates, then use the generated code):
{% set CLASSES_BINARY_SENSOR = [
  "battery",
  "battery_charging",
  "carbon_monoxide",
  "cold",
  "connectivity",
  "door",
  "garage_door",
  "gas",
  "heat",
  "light",
  "lock",
  "moisture",
  "motion",
  "moving",
  "occupancy",
  "opening",
  "plug",
  "power",
  "presence",
  "problem",
  "running",
  "safety",
  "smoke",
  "sound",
  "tamper",
  "update",
  "vibration",
  "window"
] %}

{% set code_input_boolean = '
  testing_device_class_{0}:' %}

{% set code_binary_sensor = '
      - name: testing_device_class_{0}
        device_class: {0}
        state: >-
          {{% set INPUT_NAME = "input_boolean.testing_device_class_{0}" -%}}
          {{{{ states(INPUT_NAME) }}}}
        attributes:
          package_type_1: test
' %}

input_boolean:
{% for class in CLASSES_BINARY_SENSOR -%}
  {{ code_input_boolean.format(class) }}
{%- endfor %}

############################################################################

template:
  - binary_sensor:
{%- for class in CLASSES_BINARY_SENSOR -%}
  {{ code_binary_sensor.format(class) }}
{%- endfor %}
2 Likes

And one more thing. I have never seen that the devs have done a roll-back on the comments of the community. Never. So let’s stay present until this has lead to something good and workable. For sure they can make that happen…

5 Likes