2022.12 Color states are broken/unusable

Configuration
699

Is this related to my experience in 2023.2 of the stock Light card using the default theme that some entities’ icons don’t change colour according to their state?

For example I have a Hue group that, in the light card, the icon shows inactive (blue grey) but when on or 50% bright, shows black. But an individual hue bulb in a Light card, the icon shows its colour and state.
My Magic Home LED lights work ok but my tuya light entities don’t.
If I use a Button card or Entities card then the icon behaves as expected.

700

Well ok, I can see it’s supposed to work like this, but something is obviously broken because I don’t have any color CSS when the HVAC is in idle state:

image
image963×777 53.9 KB

701

Hi,

Any solution to hiding the Assist icon?
I would appreciate being able to turn it off for certain views.

Thanks

702

Please don’t hi-jack an already too long conversation with a question that has nothing to do with colours.

1 Like
703

Sorry - just replying to a question already asked in this blog!
I realise it was off topic but it had already been asked.

704

No it does not! And I see you just helped someon in the main 2023.2 thread and it did not work for him either without the –

The undocumented –

1 Like
705

I think perhaps you may have misclicked, this is a single issue thread sparked from a long discussion from December updates.

The question you asked is related to the February update, whose thread lives here: 2023.2: How can I Assist?

706

Not to derail the discussion which is about the colour aspect of the card

But the card seems harder than it is.

The big job is to draw the ground place of the house. I used an app on my iPad and entered the real measurements and exported it as a picture.

The rest is actually simple. And hard.

Simple as in - if you followed the original documentation, you can add your entities. It takes time to get the x,y coordinates right but it quickly makes sense and you can see the result live as you type the numbers. I can recommend trying it. You can make some pretty cool things that no other card can do. And it impresses when you show it to your friends and colleagues.

707

This as the post I was responding to.
As you can see it is in this blog.
However you are correct, it is off topic for which I have apologised, But so was the original by a well respected member of this community and I was merely responding to the original post asking for an update.
Again I apologise for responding to the post.

1 Like
708

How do we find out what is defined in the home assistant default theme? Where can we see the theme source?

709

Indeed, but it’s missing the on/off state. I’ve found what I wanted digging into the code frontend/ha-style.ts at e6de8ec94d15b7f94887aa4e25b3a7898a693a89 · home-assistant/frontend · GitHub

710

I’ve found the bug Paul, I’ve submitted a pull request: Fix a coloring issue with climate states by Flavien · Pull Request #15325 · home-assistant/frontend · GitHub.

3 Likes
711

So this no longer works with 2023.2.0?

712

To those that liked the method of loading a bit of JS to override the default theme here is mine as of today so you can see the updated syntax

In configuration.yaml

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/kenneth-colours.js

And the …config/www/kenneth-colours.js looks like this

document.documentElement.style.setProperty('--state-cover-active-color', 'var(--orange-color)');
document.documentElement.style.setProperty('--state-cover-inactive-color', 'var(--green-color)');
document.documentElement.style.setProperty('--state-alarm_control_panel-disarmed-color', 'var(--green-color)');
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)');

With these changes my alarm panel is reg/green as I want it

I have been able to remove most styles from my picture-elements card. The only ones I still need are binary_sensors where I want the off colour to be green. I want binary sensors for motion, presence, toilet seat down to be gray when off which is like the default theme. But I want binary sensors for windows, doors, door locks (which is a reed relay sensing magnet on bolt and not a snart lock) to be green when off. My taste, no complaint. And I get that in the picture-elements with this syntax

  - entity: binary_sensor.front_door
    icon: mdi:door
    style:
      '--state-binary_sensor-inactive-color': green
      left: 44%
      top: 81%
    type: state-icon

Unfortunately it seem that you cannot use the higher level common style for active and inactive. You have to specify exactly the style used for that type of element. And note the “–” prefix that is needed when you write the names in a javascript or CSS context. But not in the YAML when you build a style.

713

talking about colors not working, they may have been forever in this particular card, tbh, I am not even sure about that because I haven’t used picture-glance card that much.
Now that I do have a bigger setup for my rooms using picture-entity cards, I notice all entities being white in the bottom section.

Paul, is there any chance this is an error, or is it by design these entities simply ignore the careful theme settings we now have:

Scherm­afbeelding 2023-02-03 om 13.30.34

these entities in this core card ignore the theme variable colors, and the icon_color, bt the latter is a custom card, so can’t complain there.

It would be a true asset if picture-glance would show colors.
maybe add

  state_color: true

if it is not already supposed to be using the colors.(ofc I did try that, but its not officially there…so yields no effect)

714

no need to apologize. it was a bit of a harsh comment. every once in a while some related subject is touched, and we are all adult enough to friendly suggest a better solution for what can be seen as a non -related side-track.

derailing/hijacking…big words.
o well, I guess this is still a very delicate matter for some friends in the community.

715

not having done this myself yet, but can you not follow:
2022.12 Color states are broken/unusable - #695 by piitaya and set those colors for binary per device_class?

seems this was precisely introduced for that type of requirement?

716

Yes. I could in principle do that.

But the binary sensors are mostly MQTT based and made by myself years ago. So I would need to change them all first. I may do that.

But also - I may not really want the same binary_sensors to be green in my other cards. My picture-elements cards have this overall theme that green is good, red is bad, grey can be ignorred. In other cards I like the normal grey.

With the exception of the alarm card, most colours are fine. I dislike the purple covers but that is personal taste and I cannot and will not argue that I am right and others are wrong.

I am generally very happy with the new documented way to change colours in themes. That is 100% a good thing.

It is just the picture-elements card I am grumpy about because… No need to repeat. I think you all got it now :slight_smile:

EDIT: I actually have added device classes to most of my MQTT binary_sensors. I just forgot. Let me play with that and report back how well that works in practical overall in all cards

1 Like
717

I cannot make it work.

I have example of a door sensor. It is defined as an MQTT binary sensor (using the new syntax)

This is in mqtt: include → mqtt_binary_sensors.yaml

binary_sensor:
  - name: "Front Door"
    state_topic: "sensor/frontdoor"
    unique_id: "Front Door Sensor"
    payload_on: "on"
    payload_off: "off"
    device_class: "door"

But when I try all these either in theme or in picture-elements

state-binary_sensor-door-closed-color

state-binary_sensor-door-inactive-color

They do not work. What works is state-binary_sensor-inactive-color

The minute I add the device_class I cannot make it work anywhere.

Is that a bug? Or am I doing it wrong? I am really trying to understand the documentation but I cannot make it work

718

I think it must be a bug that inactive does not work.

But it just struck me that maybe for a door the state is not open and closed but on and off.

And yes. A binary sensor defined in MQTT with device_class door gets on and off states.

so this works

state-binary_sensor-door-off-color

This is really hard