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?
Hello,
I’ve just found this topic and I have to say it’s a goldmine of information!
I have created a Tile Card into which I have added a cover that is linked to my garage door sensor.
It works as expected but I am unable to change the color of the garage icon depending on the sensor state (on/off) or cover state (open/closed).
using @Ildar_Gabdullin posts, I’ve tried this:
type: tile
entity: cover.garage_door
features:
- type: cover-open-close
card_mod:
style: |
ha-card {
{% if is_state('cover.garage_door', 'open') %}
--tile-color: red !important;
{% else %}
--tile-color: green !important;
{% endif %}
}
But it does not work (same using the binary_sensor.porte_garage_ouverture value).
I’ve even tried removing the if/else conditions to check if I was able to set it to a fixed color:
type: tile
entity: cover.garage_door
features:
- type: cover-open-close
card_mod:
style: |
ha-card {
--tile-color: red !important;
}
But that doesn’t work either.
Do you have any hints about what I am doing wrong?
Thanks for your help!
Far from any civilian pc now, cannot say for sure.
I bet that you will have to use a cover-specific css variable (kind of “state-cover-open” or whatever it is called).
Thanks for your input on tile card modifications.
I would like to modify tile card for lights with slider in such a way that - under the new dashboard with section - it effectively looks like a mushroom card in horizontal card.
Here some illustration:
Here my code for mushroom card:
type: custom:mushroom-light-card
entity: light.g089_uplights_master_bedroom
use_light_color: false
show_brightness_control: true
name: Uplights
collapsible_controls: true
layout: horizontal
and here my code for tile card (which I prefer due to its nice GUI features) nested inside a horizontal card so it stretches and with the card mod CSS to modify the slider. However, its not elegant and working properly:
type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g093_roof_eaves_lights_master_bedroom
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 4px !important;
height:12px !important;
width: 70% !important;
margin-top: -30px;
margin-left: 90px;
#--control-slider-color: orange !important;
--control-slider-background: red !important;
}
.: |
ha-card {
--tile-color: red !important;
}
If anyone with better CSS skills than me can resolve this?
Thanks
Martin
This worked well for me
type: horizontal-stack
cards:
- features:
- type: light-brightness
type: tile
name: Eaves
state_content: brightness
entity: light.g089_uplights_master_bedroom
color: red
tap_action:
action: toggle
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 12px !important;
height: 100% !important;
width: 50% !important;
--handle-size: 0px;
--control-slider-color: red !important;
--control-slider-background: red !important;
margin-top: -50px;
margin-left: 50%;
}