card_mod:
style:
ha-tile-icon$: |
.shape {
Sometime it makes life easier, if searching for a solution, sometimes not … but it’s never a good idea to “tag/ping” someone to ask a question 
… the answer to a question most of the times pops up, with an “open” question
Thanks! That’s it.
Yes the change to ha-tile-icon was announced , i believe ( And mentioned/showed above in 1 of lldars examples ) … No long path, just right down in the Shadow !
You can access the shape color with --tile-color: under ha-card { as well.
I generally use the .shape method, but thought I’d mention it.
@pmgsrosa I included code for adjusting the slider height and color if you use those as well.
type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
- type: light-brightness
tap_action:
action: toggle
icon: mdi:light-recessed
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 4px !important;
height:15px !important;
--control-slider-color: orange !important;
--control-slider-background: red !important;
}
.: |
ha-card {
--tile-color: red !important;
}
Edit: Deleted, wrong!, was distracted, look below, for right path
100% correct. Learned that the hard way with the climate card this evening!
I learned by “accident” doo to my lazy nature 
Couldn’t get this code to work with the tile light card. The looong path may be necessary with this one.
Here is our working solution, with the help of @Ildar_Gabdullin.
This changes the button colours and also the highlight colours when hovering to match the colour it will be if that’s the state.
- type: tile
entity: alarm_control_panel.home
name: "Home Alarm"
features:
- type: "alarm-modes"
modes:
- armed_home
- armed_away
- disarmed
card_mod:
style:
# hover colours
hui-card-features $ hui-alarm-modes-card-feature $ div ha-control-select $ div: |
#option-armed_home {
--control-select-color: #ffa800 !important;
}
#option-armed_away {
--control-select-color: #aa0000 !important;
}
#option-disarmed {
--control-select-color: #40b100 !important;
}
.: |
ha-tile-icon {
--tile-color:
{% set status = states(config.entity) %}
{% set colors = {
'armed_home': '#ffa800',
'armed_away': '#aa0000',
'disarmed': '#40b100'
} %}
{{ colors.get(status, 'grey') }};
}
ha-card {
--state-alarm_control_panel-armed_home-color: #ffa800;
--state-alarm_control_panel-armed_away-color: #aa0000;
--state-alarm_control_panel-disarmed-color: #40b100;
}
Weird, but you are right, i have have no clue where/what happened in this end 
My Lazy nature played me ! … i never clicked save, just removed the long-path, and tested in editor … another reminder to me 
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 ))).
An update to the prior solution.
If you want the colours to work for your history graph card too, then you can override the theme colour variables (introduced in 2022.12) in a custom.js file:
document.documentElement.style.setProperty('--state-alarm_control_panel-armed_home-color', '#ffa800');
document.documentElement.style.setProperty('--state-alarm_control_panel-armed_away-color', '#aa0000');
document.documentElement.style.setProperty('--state-alarm_control_panel-disarmed-color', '#40b100');
You will then only need the card-mod section for the highlight/hover:
card_mod:
# this works in conjunction with www/custom.js
style:
hui-card-features $ hui-alarm-modes-card-feature $ div ha-control-select $ div: |
#option-armed_home {
--control-select-color: #ffa800 !important;
}
#option-armed_away {
--control-select-color: #aa0000 !important;
}
#option-disarmed {
--control-select-color: #40b100 !important;
}
So you can remove this:
.: |
ha-tile-icon {
--tile-color:
{% set status = states(config.entity) %}
{% set colors = {
'armed_home': '#ffa800',
'armed_away': '#aa0000',
'disarmed': '#40b100'
} %}
{{ colors.get(status, 'grey') }};
}
ha-card {
--state-alarm_control_panel-armed_home-color: #ffa800;
--state-alarm_control_panel-armed_away-color: #aa0000;
--state-alarm_control_panel-disarmed-color: #40b100;
}
Result:
PS: Of course, you can just create a full theme too, but that may be overkill.
thanks for the tag, I did find some mods for the climate card here: Style Tile: more-info - #8 by Mariusthvdb
I am not a big fan of the numbered nth-child solutions, as they are hard coded to the order of things.
Prefer the named elements myself, and theme color variables if possible.
not always an option though. In my situation, I am still looking for a direct way to touch either the opacity (ha sets it to 1) or color of the selected button icon.
is there any way to change features icons as well?
