Yeah
frontend:
themes: !include themes.yaml
extra_module_url:
- /local/card-mod.js
did you install card-mod manually or from hacs?
manualy just downloaded the file
Install from hacs !!
It seems to me, but I’d like confirmation by community, that the need to change button colors is due to a recent change to some default of the theme alarm_control_panel values look here. In other words, if I’m right, a definitive change would require overriding these values with a specific theme. Any thoughts?
Thank you for pointing me to right direction 
I used this guide, now its working 
1 Like
Hi
Is it possible to change the color of the status icon? In the .yaml file of the theme I can’t find references (Google Dark theme ), I use the custom Alarmo card…
It is certainly achievable, you have to get familiar with card_mod. I’m using regular alarm panel, so I unfortunately can’t help you on this specific matter.
I am posting a reply to this older post because - I was running HA Core 11.3 and upgraded to Core 12.0 and had issues. I did not write any of this code - but have enjoyed the benefit of the color change to green and red on the alarm panel provided by kolia - I have posted the code as well which now fails - it is not all kolia’s code - Being a senior I needed the keypad a little larger all around - it now fits full screen to my Fire HD8 - so there are 2 sets of styling in the attached code one for state color change and one for larger key pad - after the 12.0 upgrade it was once again a small keypad and the state background was gray - I took apart these 2 and found with just the styling of the larger keypad lines 18-52 - it worked - I had a larger keypad again. I am at a loss at finding out what happened with the card mod color changes - lines 8-17 - kolia as I understand it will gracefully take a look at if on his end it was affected - I am running Home Assistant add on - not running docker - if that matters - Thanks for any help with this - all my efforts for 2 days were to no avail - its been a while for the larger key pad code I found - I did not write it was from another HA member - again I have enjoyed the benefit of
states:
- arm_home
- arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
style:
ha-chip:
$: |
div:nth-child(1) {
{% if is_state("alarm_control_panel.alarmo", "disarmed") %}
background-color: green;
{% else %}
background-color:red;
{% endif %}
}
style: |
ha-card {
--paper-input-container-shared-input-style_-_font-size: 2.5rem;
--keypad-font-size:2.5rem;
--mdc-typography-button-font-size: 1.3rem;
--mdc-button-outline-color: rgba(0, 0, 0, 0);
--paper-font-subhead_-_font-size: 1.5rem;
--mdc-shape-small: 100%;
}
#keypad {
width: 30%;
max-width: 500px !important;
}
#keypad mwc-button {
border-radius: 5px;
}
mwc-button.numberkey {
border-color: rgba(100,100,100,.1);
border-width: 2px;
border-style: solid;
}
#keypad mwc-button:hover {
background: rgba(100,100,100,.2);
}
#keypad mwc-button {
padding: 17px !important;
margin: 4px;
width: 10%;
box-sizing: border-box;
height: 73px;
}
paper-input {
max-width: 300px !important;
}
}
I haven’t yet upgraded. I’ll keep you posted as soon as it done and have the solution 
After upgrading to HA Core 12.0 and had the issue of the state now gray again I used a recent backup to go back to HA Core 11.3 and of course everything is working again - I was wondering if the version of Alarmo was updated in the HA Core 12.0 update- In HA Core 11.3 the version of Alarmo is V1.9.13 - sdavides if you are still in HA Core 12.0 can you tell me what the version of Alarmo is ? trying to figure out if it was an updated core issue or updated Alarmo version issue -
I ran across another post of Kolia where he was replying to another user who wanted the background color changed on buttons and the armed badge - there were no if-then for states and that partially worked - meaning in HA 12.0 it failed on the change for the state- armed or disarmed to green but worked on the button part of it - being a novice and if I were to hazard a guess it would be the addressing of the line div:nth-child(1) not working in 12.0
This is the other code I am referring to - it’s relevance is the alarm state badge div:nth-child(1) does not turn green stays gray - the button however turns green
type: alarm-panel
states:
- arm_home
- arm_away
entity: alarm_control_panel.610
card_mod:
style:
ha-chip:
$: |
div:nth-child(1) {
background-color: green;
}
'#armActions':
mwc-button:nth-child(1):
$: |
#button {
background-color: green
}
span.slot-container > slot {
color: yellow;
}
Some change occured in the DOM.
Here is the new code
type: vertical-stack
cards:
- type: alarm-panel
states:
- arm_night
- arm_away
entity: alarm_control_panel.610
card_mod:
style:
.: |
ha-card {
border-radius: 20px 20px 20px 20px;
border-bottom: hidden;
}
ha-assist-chip:
$: |
div > md-ripple {
{% if is_state("alarm_control_panel.610", "disarmed") %}
background-color: green;
{% else %}
background-color:darkred;
{% endif %}
}
Thanks so much for your time - very much appreciated - I upgraded to 12.1 and it works again with your revision - just trying to figure out how to get the sizing working again - I’m not the best at that but I’m sure Ill figure it out somehow - Thanks again
Thankyou Kolia, you are the best.
For the buttons, basically you’d like to have bigger buttons, isn’t?
Edit with solution
Maybe you could try that?
type: vertical-stack
cards:
- type: alarm-panel
states:
- arm_night
- arm_away
entity: alarm_control_panel.610
card_mod:
style:
.: |
ha-card {
border-radius: 20px 20px 20px 20px;
border-bottom: hidden;
}
:host {
--mdc-typography-button-font-size: 20px;
}
ha-chip:
$: |
div:nth-child(1) {
{% if is_state("alarm_control_panel.610", "disarmed") %}
background-color: green;
{% else %}
background-color:darkred;
{% endif %}
}
this screenshot works as a perfect fit to my Fire Tablet HD8 - it is my inability or lack of knowledge on how to join this code for the large key pad and the newly revised code for the green and red color changes all in one so I get the big key pad and green and red on the armed badge. Here are both sets that work independent of each other I do not know how to join them
states:
- arm_home
- arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
style:
ha-assist-chip:
$: |
div > md-ripple {
{% if is_state("alarm_control_panel.alarmo", "disarmed") %}
background-color: green;
{% else %}
background-color: red;
{% endif %}
}
and for the key pad
card_mod:
style:
.: |
ha-card {
--paper-input-container-shared-input-style_-_font-size: 2.5rem;
--keypad-font-size:2.5rem;
--mdc-typography-button-font-size: 1.3rem;
--mdc-button-outline-color: rgba(0, 0, 0, 0);
--paper-font-subhead_-_font-size: 1.5rem;
--mdc-shape-small: 100%;
}
#keypad {
width: 30%;
max-width: 500px !important;
}
#keypad mwc-button {
border-radius: 5px;
}
mwc-button.numberkey {
border-color: rgba(100,100,100,.1);
border-width: 2px;
border-style: solid;
}
#keypad mwc-button:hover {
background: rgba(100,100,100,.2);
}
#keypad mwc-button {
padding: 17px !important;
margin: 4px;
width: 10%;
box-sizing: border-box;
height: 73px;
}
paper-input {
max-width: 300px !important;
}
}
Did you try that?
states:
- arm_home
- arm_away
type: alarm-panel
entity: alarm_control_panel.alarmo
name: Alarm
card_mod:
style:
.: |
ha-card {
--paper-input-container-shared-input-style_-_font-size: 2.5rem;
--keypad-font-size:2.5rem;
--mdc-typography-button-font-size: 1.3rem;
--mdc-button-outline-color: rgba(0, 0, 0, 0);
--paper-font-subhead_-_font-size: 1.5rem;
--mdc-shape-small: 100%;
}
#keypad {
width: 30%;
max-width: 500px !important;
}
#keypad mwc-button {
border-radius: 5px;
}
mwc-button.numberkey {
border-color: rgba(100,100,100,.1);
border-width: 2px;
border-style: solid;
}
#keypad mwc-button:hover {
background: rgba(100,100,100,.2);
}
#keypad mwc-button {
padding: 17px !important;
margin: 4px;
width: 10%;
box-sizing: border-box;
height: 73px;
}
paper-input {
max-width: 300px !important;
}
}
ha-assist-chip:
$: |
div > md-ripple {
{% if is_state("alarm_control_panel.alarmo", "disarmed") %}
background-color: green;
{% else %}
background-color: red;
{% endif %}
}
Kolia
I got it to work - it was a format issue on my part - THANKS AGAIN !
I’ve been using the following code to change the color on the chip in upper right corner
But i’ll think since last update the color not changing.
Anyone else having this problem?
card_mod:
style:
ha-chip:
$: |
div:nth-child(1) {
{% if is_state("alarm_control_panel.dscalarm_partition_1", "disarmed") %}
background-color: green;
{% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_away") %}
background-color: red;
{% elif is_state("alarm_control_panel.dscalarm_partition_1", "armed_home") %}
background-color: orange;
{% else %}
background-color: grey;
{% endif %} }