[FR] Use new color states

[chemelli74]

Checklist

• [x] I checked for similar existing requests (both open and closed) before posting.
• [x] My request is generic, other users may benefit from it too.

Proposal

Use the new theme's color states:

  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

Additional info

[some example of how the new functionality should look like]

[ghost]

Isn't the new color scheme in HA armed: green arming/pending: orange/yellow triggered: red disarmed: blue ?

[nielsfaber]

The colors HA used are defined in https://github.com/home-assistant/frontend/blob/dev/src/resources/ha-style.ts:

      --rgb-state-alarm-armed-color: var(--rgb-green-color);
      --rgb-state-alarm-arming-color: var(--rgb-orange-color);
      --rgb-state-alarm-disarmed-color: var(--rgb-grey-color);
      --rgb-state-alarm-pending-color: var(--rgb-orange-color);
      --rgb-state-alarm-triggered-color: var(--rgb-red-color);

The colors used by this card are:

        --alarm-color-disarmed: var(--label-badge-green);
        --alarm-color-pending: var(--label-badge-yellow);
        --alarm-color-triggered: var(--label-badge-red);
        --alarm-color-armed: var(--label-badge-red);

Personally I don't think the colors of this card have to be equal to those of the HA alarm panel card. I personally prefer green for disarmed, red for armed state, orange/yellow for the transition states in between (like a traffic light). I don't like grey to be the disarmed color, since I associate this with unavailable state and I find this color to provide bad contrast in my dashboard. In summary, I'm happy with the colors as they are. But I'm open for a discussion about this.

If the tones of the colors have changed and that is the actual request of @chemelli74 , that's another story. I prefer not to use hard-coded color codes, but use the color names defined by HA. The current mapping is as follows (defined by HA):

      --label-badge-red: #DF4C1E;
      --label-badge-blue: #039be5;
      --label-badge-green: #0DA035;
      --label-badge-yellow: #f4b400;
      --label-badge-grey: #9e9e9e;

So the color codes are different to your proposed color codes. What is your list of color codes based on, i.e. where are they used in HA?

[ghost]

HA itself seems to be a bit inconsistant. I never saw gray as disarmed - as I used the Button card. There it is blue.

[mrgrlscz]

Hi humans, this is a solution I found, at card level. Just insert this code (uses card-mod component) at the end of alarmo-card: card_mod: style: | ha-card > div.header > div.icon > alarmo-state-badge { --alarm-color-disarmed: var(--label-badge-blue); --alarm-color-pending: var(--label-badge-orange); --alarm-color-triggered: var(--label-badge-red); --alarm-color-armed: var(--label-badge-green); }

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[chemelli74]

not stale

[Sam01101101]

still requires a permanent resolution

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days

[BenchPressesBooks]

definitely not stale yet!

[nielsfaber]

This should be resolved by updating alarmo-card to v1.5.0. @chemelli74 Could you please update the card and confirm the colors are OK now? You can close the issue if this is the case.

[chemelli74]

This should be resolved by updating alarmo-card to v1.5.0. @chemelli74 Could you please update the card and confirm the colors are OK now? You can close the issue if this is the case.

Thx for the update. Seems all but "disable" state are now in sync.

[nielsfaber]

@chemelli74 HA did not define a color for the disarmed state, see https://github.com/home-assistant/frontend/blob/eabd8b54f410b90c0c032c8422e04fa888fbad9f/src/resources/ha-style.ts#L126-L134 Alarmo-card uses the --state-inactive-color instead. In my theme (default theme) it looks exactly equal to the HA alarm panel card.

[TekFan]

As many other, I guess, I'm not happy with this change. It may follow HA color scheme but that doesn't mean this is the right way to do it for everyone. I managed to avoid theme so far as the HA team managed to eventually mostly correct the mess they made a few releases back. So I guess I have to go that way this time. That will allow me to correct the cover color as well as it was the only thing I didn't like. So I re-instated themes in my config and my old settings are still working fine so I know theme management is ok but unfortunately not for the Alarmo card. I tried this:

--alarm-color-disarmed: var(--label-badge-green); --alarm-color-pending: var(--label-badge-yellow); --alarm-color-triggered: var(--label-badge-red); --alarm-color-armed: var(--label-badge-red);

and it doesn't work. So I tried this:

state-alarm-armed-color: '#F44336' # Red state-alarm-arming-color: '#FF9800' # Orange state-alarm-pending-color: '#FF9800' # Orange state-alarm-triggered-color: '#F44336' # Red state-alarm-disarmed-color: '#4caf50' # Green

and it doesn't work either... So I don't know how to interpret what I see above in this thread. Any help would be appreciated. BTW, I'm sure I will not be the only one wanting to revert back to previous colors , so maybe a clear explanation on how to get it back working as before with themes would be appreciated as well.

[TekFan]

Ok, so this works: (I admit I'm not very fluent in theming so it took me a while to figure it out, sorry 'bout that...)

state-alarm_control_panel-armed_away-color: var(--red-color) state-alarm_control_panel-armed_custom_bypass-color: var(--red-color) state-alarm_control_panel-armed_home-color: var(--red-color) state-alarm_control_panel-armed_night-color: var(--red-color) state-alarm_control_panel-armed_vacation-color: var(--red-color) state-alarm_control_panel-arming-color: var(--orange-color) state-alarm_control_panel-disarming-color: var(--orange-color) state-alarm_control_panel-pending-color: var(--orange-color) state-alarm_control_panel-triggered-color: var(--red-color) state-alarm_control_panel-disarmed-color: var(--green-color) (note: only in HA panel at the moment)

The only exception is for the disarmed state that stays grey... I've seen as well that this state is not defined in the .ts but [ state-alarm_control_panel-disarmed-color: var(--green-color) ] works perfectly with HA original control panel, so I guess it does exist but someone forgot to list it in the .ts file. So I think Alarmo could use it safely instead of [--state-inactive-color] because otherwise, I don't see how we can change the disarmed state with theming without altering all inactive states in HA. Ot is there another way to change the disarmed color ?

[TekFan]

@chemelli74 HA did not define a color for the disarmed state, see https://github.com/home-assistant/frontend/blob/eabd8b54f410b90c0c032c8422e04fa888fbad9f/src/resources/ha-style.ts#L126-L134

Well, [--state-alarm_control_panel-disarmed-color: var(--grey-color);] does exists and works perfectly in HA panel. It's just an omission in the doc.

Alarmo-card uses the --state-inactive-color instead.

imho, I don't think this should be like that. My view is that the inactive theme color should be used only for inactive devices and in this case Alarmo is still active, it is in a disarmed state but still active in the background for environmental sensors. The disarmed status is an active status of the system where doors, windows, etc. can be opened and (in my opinion) should be green like a traffic light where you can go ahead freely. When the Alarm is armed, it should be red because you can't open anything, you can't go out. But if Alarmo had a switch to completely shut it down (no background fire or water leak sensors active, etc.) then I would agree there the status would become 'inactive" and be grey as per HA new dogma.

Anyway, It's just my opinion, I don't want to argue with anyone, as long as we have themes, everyone is able to choose what they see fit, but in this particular case we then need a way to change the disarmed color.

So why not use the [state-alarm_control_panel-disarmed-color] ? which btw is correctly defaulted to grey in the latest HA default theme, guaranteeing that it won't break the new dogma.

[chemelli74]

@chemelli74 HA did not define a color for the disarmed state, see https://github.com/home-assistant/frontend/blob/eabd8b54f410b90c0c032c8422e04fa888fbad9f/src/resources/ha-style.ts#L126-L134 Alarmo-card uses the --state-inactive-color instead. In my theme (default theme) it looks exactly equal to the HA alarm panel card.

Thx for the info. So I'm ok with the work done.

Closing,

Simone

[nielsfaber]

@TekFan I released v1.5.1 which uses the state-alarm_control_panel-disarmed-color but also uses fallbacks for cases where the color is not defined. Hope this settles the issue for you.

[TekFan]

Awesome ! This is perfect, now everyone will be satisfied with this solution. Thank you for your fantastic work.

[sammyke007]

I've noticed the new colors and would like to return to the old situation. What is the exact working config please? And where do I put it?

Edit: this seems to work with card-mod and adding it to the alarmo-card:

card_mod:
  style: |
    ha-card > div.header > div.icon > alarmo-state-badge {
    --state-alarm_control_panel-armed_away-color: var(--red-color);
    --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
    --state-alarm_control_panel-armed_home-color: var(--red-color);
    --state-alarm_control_panel-armed_night-color: var(--red-color);
    --state-alarm_control_panel-armed_vacation-color: var(--red-color);
    --state-alarm_control_panel-arming-color: var(--orange-color);
    --state-alarm_control_panel-disarming-color: var(--orange-color);
    --state-alarm_control_panel-pending-color: var(--orange-color);
    --state-alarm_control_panel-triggered-color: var(--red-color);
    --state-alarm_control_panel-disarmed-color: var(--green-color)
    }

[TekFan]

Actually, unless you use it elsewhere already, you don't need cardmod, you can just put this remapping in your theme file. These variables are only influencing the alarmo-card or the original alarm card anyway.