For the record - my proposed solution is a bit different:
type: tile
entity: alarm_control_panel.security
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- disarmed
card_mod:
style:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select $: |
.option:nth-child(1)::before {
background-color: magenta !important;
}
.option:nth-child(2)::before {
background-color: orange !important;
}
.option:nth-child(3)::before {
background-color: cyan !important;
}
.: |
ha-card {
--state-alarm_control_panel-armed_home-color: magenta;
--state-alarm_control_panel-armed_away-color: orange;
--state-alarm_control_panel-disarmed-color: cyan;
}
It is not using these weird “–control-select-color” vars but depends on an order ))).
