Hey
i would like to change the Card-Color on condition. In the top left corner you‘ll find my aqara door sensors named „Wohnungstür“ and „Kellertür“. I would like to change the color of each card seperatly to red, if the state change from „off“ to „on“. Is that possible?
Thank you.
1 Like
Hi, what kind of cards do you use? I think there are several ways to do what you want. My first attempt will be to use two conditional cards, one for each background:
Another option would be the config template card, where you can use templates in your card definition:
When you use the custom button card, it has an option to change the style of the card, depending on state:
Hey @tobi-bo , thank you for your help! I use simple entity-Cards. And i can not believe, that there is no option “out of the box”. Do i have to install in fact a template?
Yes, I think so. As far as I know, the standard entities card does not support any templating or changing the background color depending on state.
1 Like
Hey, @tobi-bo, would you please help me? Since a lot of days i try to integrate the config-template-card. I installed it via HACS. And then the instructions don´t go into the support of beginners. Unfortunately I have no idea, how to implement a card that change his background color in dependency of the status. I can’t even find entry-level information or YouTube videos explaining how to embed. 
Hi, this works for me:
type: 'custom:config-template-card'
variables:
LIGHT_STATE: states['light.lightstrip_bett'].state
entities:
- light.lightstrip_bett
card:
type: entities
entities:
- light.lightstrip_bett
card_mod:
style: >-
${ if (LIGHT_STATE === 'on') {
'ha-card {background-color: #AAFFAA;}'
}
else {
'ha-card {background-color: #FFAAAA;}'
}}
Results in:
Doesn’t look pretty so far, but you have to play around with the colors 
For this example card-mod must be installed, but in principle the template works at every point in the card definition.
1 Like
Well… I´ve installed the card-mod and the config-template-card via HACS. And if i have a look on Ressources in the Lovelace section, both of them are shown. But if i create a new manual card and fill in the basic code,
card_mod:
style: |
ha-card {
color: red;
}
i´ll become a error: “No card type found”. If i fill in your code, nothing happens. The result is empty. It feels like there is any missing step… But i have no idea, what i could have forgotten…
1 Like
you don’t need the template card, card mod accepts jinja templates
Oh hell… So many new things… 
I tried the template card to see what happens. But do i understand you right: I have to open my existing card and need to edit the code?
My original:
cards:
- type: button
tap_action:
action: none
entity: binary_sensor.openclose_4
show_icon: false
show_state: true
show_name: true
hold_action:
action: none
icon_height: 65px
- type: button
tap_action:
action: none
entity: binary_sensor.openclose_3
show_name: true
hold_action:
action: none
icon_height: 65px
show_state: true
show_icon: false
Sorry guys! It’s just stuck with me.
- type: button
tap_action:
action: none
entity: binary_sensor.openclose_4
show_icon: false
show_state: true
show_name: true
hold_action:
action: none
icon_height: 65px
card_mod:
style: |
ha-card {
background-color: {{ '#AAFFAA' if is_state('binary_sensor.openclose_4', 'on') else '#FFAAAA' }};
}
9 Likes
Aaaahhh, got it! I thougt, that i have to use a separate card because of the HACS installations. I still have a lot to learn! 
Many thanks for your help, guys! And @tobi-bo: Thank you for your patience!
1 Like
Have the same kind of issue with Card Mod. I want to have a card colored if the output power of my solar panels is more than 0. I’ve created this
type: entity
entity: sensor.rdk0cev0ae_output_power
card_mod:
style: |
ha-card {
color: {{ '#AAFFAA' if is_state('sensor.rdk0cev0ae_output_power', 'state') > 0 else '#000000' }};
}
But for some reason this doesn't work. Can someone see what is going wrong?
Got it working 
1 Like
While most other answers are good I want to go a little further and give you a little more functionality to this.
card_mod:
style: |
ha-card {
{% if is_state('light.entity_name', 'on') %}
{% set light_color = state_attr('light.entity_name', 'rgb_color') %}
background-color: rgb({{ light_color[0] }}, {{ light_color[1] }}, {{ light_color[2] }}, 0.1);
{% endif %}
}
This supports color change of the entity in question. The idea is to get the rgb colors from the entity in a variable and use it to construct the color in css when the light is on. Note that the background will be with transparency of 10% and you might want to adjust that as needed based on your design. Have fun!
1 Like