Alarm Panel Card state colors are broken since frontend 20221213.0

[monpelaud]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Hi, Since frontend 20221213.0, Alarm Panel Card does not correctly handle colors depending on the state. Best regard

Describe the behavior you expected

Steps to reproduce the issue

...

What version of Home Assistant Core has the issue?

2022.12.6

What was the last working version of Home Assistant Core?

2022.12.3

In which browser are you experiencing the issue with?

Firefox, Microsoft Edge, Chrome

Which operating system are you using to run this browser?

Windows 11

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[HazardousRat]

Yes, I'm having the same issue. Hope this gets fixed soon.

[Mavieny]

Yes, here the same

[Electronlibre2012]

hello,

related to this big huge enormous discussion : https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/581

[piitaya]

Hello 🙂 We changed the colors scheme to add consistency with the lock, alarm and others entities.

• grey for inactive (off light, off switch, disarmed alarm, etc...)
• green for safe (armed alarm, locked lock)
• red for unsafe (triggered alarm, unlocked lock)

[HazardousRat]

That doesn't make much sense at least in regards to the alarm panel. The color scheme made much better sense prior which confirms the color scheme of my existing alarm panel. Green = Ok/Disarmed Amber = Stay Home & Red = Away. Would it possible to give people an option without much coding or any at all to revert back to the previous color scheme while keeping the current version?

For several days after the update that changed all of this, I initially thought I had an issue with my alarm integration which I've had for a few years now. Why "fix" something that obviously isn't broken? I've read through the comments from the post above and it appears that many people feel this change was unnecessary. I hope in a future update that it gets changed back.

[monpelaud]

Now the triggered state in light gray and we don't see the icon!

[piitaya]

@monpelaud It's a bug, thanks for reporting the issue. Here's the fix : https://github.com/home-assistant/frontend/pull/14840

[horvathgergo]

This issue still persists. I tried to revert the colors back so I added to my themes 'rgb-state-alarm-armed-color: ' but it turned white instead of color set.

[franlmc]

That doesn't make much sense at least in regards to the alarm panel. The color scheme made much better sense prior which confirms the color scheme of my existing alarm panel. Green = Ok/Disarmed Amber = Stay Home & Red = Away. Would it possible to give people an option without much coding or any at all to revert back to the previous color scheme while keeping the current version?

For several days after the update that changed all of this, I initially thought I had an issue with my alarm integration which I've had for a few years now. Why "fix" something that obviously isn't broken? I've read through the comments from the post above and it appears that many people feel this change was unnecessary. I hope in a future update that it gets changed back.

totally agree with you. In any alarm system, the intuitive thing to do is green for disarmed and red for armed/ready. I also hope they return to the previous colors

[huuscript]

Grey = is unavailable or broken, been like this since inception. So odd, why all the force change? It great that now we able to customize all the colors, but why force the color change on everyone, why not let them change it for themselves?

[ukrolelo]

Does somebody know how can i revert the color change as they were previously? Me and my wife are confused... :(

[horvathgergo]

Does somebody know how can i revert the color change as they were previously? Me and my wife are confused... :(

You can set color of this css element like the way I did: state-alarm-armed-color: "<HEX>"

[Electronlibre2012]

hi @horvathgergo can you provide the complete code and where we have to put this please?

[huuscript]

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish.

https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

[ukrolelo]

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish.

https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

I went for new theme.yaml and added this line, working correcltly with disarmed green

Classic: 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

[franlmc]

Hi,

I have also added those lines to my current theme in the .yaml file and my panel works correctly now.

Thanks for the tip

[Electronlibre2012]

thanks @huuscript ! work great!

[huuscript]

hi @horvathgergo can you provide the complete code and where we have to put this please?

You can have a look at this thread, although alarm and locks disarm color are still not able to change. personally i just revert back to old ver until a bit more polish. https://community.home-assistant.io/t/2022-12-color-states-are-broken-unusable/499890/165

I went for new theme.yaml and added this line, working correcltly with disarmed green

Classic: 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

Thanks for letting me know, last time i try the disarmed color always grey.

[franlmc]

After install new 2023.2.0 colour back to grey again 😭

[piitaya]

Official theme variables for state color support has been added : https://www.home-assistant.io/integrations/frontend/#supported-theme-variables. It's linked in the release notes.

We unified all the variables to have the same pattern for all domains.

[Electronlibre2012]

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

[franlmc]

Official theme variables for state color support has been added : https://www.home-assistant.io/integrations/frontend/#supported-theme-variables. It's linked in the release notes.

We unified all the variables to have the same pattern for all domains.

Thanks a lot!!!! working again after rename the domain

[franlmc]

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

Hi,

just rename the old domain "alarm" in the .yaml (theme) with "alarm_control_panel".

take a look this example.

  # Alarm
  state-alarm_control_panel-armed_home-color: '#F44336' # Red
  state-alarm_control_panel-armed_away-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
  state-alert-color: '#F44336' # Red

I have noticed that the "armed" status is not valid so that it can take the correct color, it is necessary to define if it is armed_home. armed_away.....

[piitaya]

Yes we now use the domain alarm_control_panel name instead of alarm for consistency.

state-alarm_control_panel-armed_away-color: "#F44336" # Red
state-alarm_control_panel-armed_custom_bypass-color: "#F44336" # Red
state-alarm_control_panel-armed_home-color: "#F44336" # Red
state-alarm_control_panel-armed_night-color: "#F44336" # Red
state-alarm_control_panel-armed_vacation-color: "#F44336" # Red

There is now one color per state. That means that you must define a color for each armed type.

[franlmc]

Yes we used the domain alarm_control_panel name instead of alarm for consistency.

state-alarm_control_panel-armed_away-color: "#F44336" # Red
state-alarm_control_panel-armed_custom_bypass-color: "#F44336" # Red
state-alarm_control_panel-armed_home-color: "#F44336" # Red
state-alarm_control_panel-armed_night-color: "#F44336" # Red
state-alarm_control_panel-armed_vacation-color: "#F44336" # Red

There is now one color per state. That means that you must define a color for each armed type.

I was editing my comment....thanks a lot

[Electronlibre2012]

thanks!

Le jeu. 2 févr. 2023, 11:32, franlmc @.***> a écrit :

hello,

i read the doc but i dont understand how to make it work now with alarm_panel.

Could you give an exemple please?

Hi,

just rename the old domain "alarm" in the .yaml (theme) with "alarm_control_panel".

take a look this example.

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 state-alert-color: '#F44336' # Red

— Reply to this email directly, view it on GitHub https://github.com/home-assistant/frontend/issues/14802#issuecomment-1413272296, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL4SIWOQ6N6W5UV6XK4HUQTWVNPI3ANCNFSM6AAAAAATAAS4KA . You are receiving this because you commented.Message ID: @.***>

[sg1888]

This color change should be reverted. I understand that a common theme is being used for HA, but there are several issues with changing the color for alarm panels:

1. Alarms RARELY will be in a triggered state (few seconds to a minute or two). If the alarm is triggered, somebody has entered the house and will likely turn it off soon (unless there's a break in - but how often has your house been broken in?). If you use RED for a triggered state, it will likely never be seen by the user.

2. ALL other alarm apps use RED as the color when the alarm is ARMED, and Green/Blue when it's DISARMED. Don't believe me? Check out the screenshots for Alarm.com (https://apps.apple.com/us/app/alarm-com/id315010649) or ADT (https://apps.apple.com/us/app/adt-pulse/id355736423).

3. Grey for Disarmed is just plain confusing. It seems as though the panel is disabled, not connected, or malfunctioning.

For staying consistent with other, well established alarm apps such as ADT, Alarm.com, Ring, etc. , please REVERT these changes to stay consistent and to improve the overall user experience on HomeAssistant. I think we can all agree the goal is to improve the overall user experience on HomeAssistant and not force consistency for consistency's sake.

[Electronlibre2012]

i agreed, green must be the idle state. But you can set this in your themes.yaml with

state-alarm_control_panel-armed-color: "#F44336" state-alarm_control_panel-disarmed-color: #4CAF50" ....

[piitaya]

Many alarm apps use red for armed and green for disarm, I totally agree. But they also use red for unlock and green for lock (the opposite of what we use today for lock entities too).

Thanks @sg1888 for sharing these examples.😊

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.