do not work becouse the entity to use ise different 
for toogle action: I need switch.presa_multimediale_cucina
for more-info: I need sensor.presa_multimediale_cucina_power
Hi, sorry if I’m going off topic, what do you use for the presence of the person? I used life360 but since it was discontinued I don’t know what to use
This 100% a button card issue. When stacking inside a button card icon size matters the most.
Check out…
@Diegocampy in this specific instance you can also call a service on the hold that toggles the switch instead. Like this:
type: custom:mushroom-template-card
entity: sensor.office_temperature_humidity_temperature
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
tap_action:
action: more-info
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.office_screen_left
2 Likes
Nice, didn’t know that!!
I use the native geolocation of home assistant. I’ve always had problems with Smartthings and their geolocation, but since I switched to Home assistant, everything here is perfect for me and my wife.
Thank you again! I’ll post the complete solution, in my specific case. Maybe it can be useful to other people
- type: custom:mushroom-template-card
primary: Presa Multimediale Cucina
secondary: |
{{states('sensor.presa_multimediale_cucina_power') }} W
icon: >
{% if is_state('switch.presa_multimediale_cucina', "off") %}
mdi:power-plug-off-outline {% else %} mdi:power-plug-outline {% endif
%}
icon_color: >
{% set k = states('sensor.presa_multimediale_cucina_power')| int (0)
%} {% set d = states ('switch.presa_multimediale_cucina') %} {% if (k
>= 20 and d == 'on') %} green {% elif (d == 'off') %} red {% else
%} grey {% endif %}
fill_container: true
layout: vertical
tap_action:
action: more-info
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.presa_multimediale_cucina
entity: sensor.presa_multimediale_cucina_power
multiline_secondary: true
card_mod:
style: |
ha-card {
{% set e = states('sensor.presa_multimediale_cucina_power') | int(0) %}
{% if (e | int(0) <= 0 ) %} --card-primary-color:grey;--card-secondary-color:grey
{% elif (e | int(0) <= 100 ) %} --card-primary-color:white;--card-secondary-color:green
{% elif (e | int(0) <= 200 ) %} --card-primary-color:white;--card-secondary-color:lime
{% elif (e | int(0) <= 500 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 800 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) <= 1000 ) %} --card-primary-color:white;--card-secondary-color:yellow
{% elif (e | int(0) >= 1500 ) %} --card-primary-color:white;--card-secondary-color:orange
{% else %}
--card-primary-color:grey;--card-secondary-color:grey
{% endif %}
I may have missed some updates of Card Mod in the last couple of month but now I am puzzled as to why my cards are partly alright, but partly not behaving as expected.
I therefore have a couple of questions with regards to conditional coloring of the mushroom template card, which I use as room cards
As examples I’ll post the code for the
Living Room (Wohnzimmer)
- type: custom:stack-in-card
card-mod:
style: |
ha-card {
{% if is_state('media_player.wohnzimmer', 'playing') %}
background: rgba(var(--color-background-blue), var(--opacity-bg));
{% elif is_state('light.livingroom', 'on') %}
background: rgba(var(--color-background-yellow), var(--opacity-bg));
{%- endif %}
}
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
icon_color: >
{% if is_state('media_player.wohnzimmer', 'playing') %}
var(--color-blue)
{% elif is_state('light.livingroom', 'on') %}
var(--color-yellow)
{%- endif %}
layout: horizontal
primary: Wohnzimmer
tap_action:
action: navigate
navigation_path: livingroom
card_mod:
style: |
ha-card {
{% if is_state('media_player.wohnzimmer', 'playing') %}
--primary-text-color: rgba(var(--color-blue-text),1);
{% elif is_state('light.livingroom', 'on') %}
--primary-text-color: rgba(var(--color-yellow-text),1);
{%- endif %}
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: light
entity: light.livingroom
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: livingroom
content_info: none
- type: template
entity: media_player.wohnzimmer
icon: |-
{% set state=states('media_player.wohnzimmer') %}
{% if state=='playing' %}
mdi:speaker
{% else %}
mdi:speaker-off
{% endif %}
icon_color: |-
{% set state=states('media_player.wohnzimmer') %}
{% if state=='playing' %}
var(--color-blue)
{% elif state=='unavailable' %}
#646464
{% else %}
var(--color-theme)
{% endif %}
content_info: none
- type: template
icon: none
tap_action:
action: navigate
navigation_path: livingroom
- type: conditional
conditions:
- entity: sensor.livingroom_temperature
state_not: 'unavailable'
chip:
type: template
content: '{{ states(''sensor.livingroom_temperature'')|float}}°C'
tap_action:
action: none
and
Kitchen (Küche)
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
background: rgba(var(--color-background-blue), var(--opacity-bg));
{% elif is_state('light.kitchen', 'on') %}
background: rgba(var(--color-background-yellow), var(--opacity-bg));
{%- endif %}
}
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: >
{% if is_state('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
var(--color-blue)
{% elif is_state('light.kitchen', 'on') %}
var(--color-yellow)
{% endif %}
layout: horizontal
primary: Küche
tap_action:
action: navigate
navigation_path: kitchen
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
--primary-text-color: rgba(var(--color-blue-text),1);
{% elif is_state('light.kitchen', 'on') %}
--primary-text-color: rgba(var(--color-yellow-text),1);
{%- endif %}
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: light
entity: light.kitchen
content_info: none
use_light_color: false
- type: template
entity: media_player.kuche
icon: |-
{% set state=states('media_player.kuche') %}
{% if state=='playing' %}
mdi:speaker
{% else %}
mdi:speaker-off
{% endif %}
icon_color: |-
{% set state=states('media_player.kuche') %}
{% if state=='playing' %}
var(--color-blue)
{% elif state=='unavailable' %}
#646464
{% else %}
var(--color-theme)
{% endif %}
content_info: none
- type: template
icon: |
{% if is_state('sensor.dishwasher_status', 'Done') %}
mdi:dishwasher-alert
{% elif is_state('sensor.dishwasher_status', 'Running') %}
mdi:dishwasher
{% else %}
mdi:dishwasher-off
{% endif %}
icon_color: |
{% if is_state('sensor.dishwasher_status', 'Done') %}
var(--color-red)
{% elif is_state('sensor.dishwasher_status', 'Running') %}
var(--color-blue)
{% elif is_state('sensor.dishwasher_status', 'Off') %}
#646464
{% else %}
var(--color-theme)
{% endif %}
content_info: none
#- type: template
# icon: none
# tap_action:
# action: navigate
# navigation_path: kitchen
- type: conditional
conditions:
- entity: sensor.kitchen_temperature
state_not: 'unavailable'
chip:
type: template
content: '{{ states(''sensor.kitchen_temperature'')|float}}°C'
tap_action:
action: none
On the Living Room I am missing the colored background and colored label
On the Kitchen, I would have expected the label to be colored, oddly the background is working. Any help or hints are welcome.
1 Like
I switched to Google Maps location sharing, pretty close to Life360 in terms of location reporting. Here’s addon you can install that will simplify managing the integration: GitHub - pnbruckner/ha-google-maps: Custom Home Assistant Google Maps Integration
A few changes to nomenclature, but also I could not recreate your colors. I figured we could start with this code and add or remove from there.
type: custom:stack-in-card
card_mod:
style: |
ha-card {
border-width: 0;
{% if states('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
background: rgba(0, 0, 255, 0.1);
{% elif is_state('light.kitchen', 'on') %}
background: rgba(0, 255, 255, 0.1);
{% else %}
background: grey
{% endif %}
}
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: >
{% if states('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
rgba(0, 0, 255, 0.1);
{% elif is_state('light.kitchen', 'on') %}
rgba(0, 255, 255, 0.1);
{% else %}
green
{% endif %}
layout: horizontal
primary: Küche
tap_action:
action: navigate
navigation_path: kitchen
card_mod:
style: |
ha-card {
border-width: 0;
{% if states('binary_sensor.motion_kitchen', 'on') or
is_state('device_tracker.thermomix', 'home') %}
--card-primary-color: rgba(0, 0, 255, 1);
{% elif is_state('light.kitchen', 'on') %}
--card-primary-color: rgba(0, 255, 255, 1);
{% else %}
--card-primary-color:green;
{% endif %}
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
chips:
- type: light
entity: light.kitchen
content_info: none
use_light_color: false
- type: template
entity: media_player.kuche
icon: |-
{% set state=states('media_player.kuche') %}
{% if state=='playing' %}
mdi:speaker
{% else %}
mdi:speaker-off
{% endif %}
icon_color: |-
{% set state=states('media_player.kuche') %}
{% if state=='playing' %}
blue
{% elif state=='unavailable' %}
'#646464'
{% else %}
red
{% endif %}
content_info: none
- type: template
icon: |
{% if is_state('sensor.dishwasher_status', 'Done') %}
mdi:dishwasher-alert
{% elif is_state('sensor.dishwasher_status', 'Running') %}
mdi:dishwasher
{% else %}
mdi:dishwasher-off
{% endif %}
icon_color: |
{% if is_state('sensor.dishwasher_status', 'Done') %}
red
{% elif is_state('sensor.dishwasher_status', 'Running') %}
blue
{% elif is_state('sensor.dishwasher_status', 'Off') %}
'#646464'
{% else %}
green
{% endif %}
content_info: none
- type: conditional
conditions:
- entity: sensor.kitchen_temperature
state_not: unavailable
chip:
type: template
content: '{{ states(''sensor.kitchen_temperature'')|float}}°C'
tap_action:
action: none
EDIT: looks like a edge issue right now, works in app, chrome and firefox. Have cleard cache also.
Is there anyone else with the issue that mushroom cards wont display the default icon on any cards? i need to define the icons for them to be displayed in the card.
Hi,
Can I get some help to achieve the below?
- Show badge icon and flash when the CCTV camera goes down(sensor state is off).
- Hide the badge icon when CCTV camera is up (sensor state is on).
I am able to achiev the #1 with the below code but I am struggling to achieve #2 to hide the badge icon when the state is on.
type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_camera_parking_rear
icon: mdi:cctv
icon_color: teal
badge_icon: mdi:close
badge_color: red
tap_action:
action: more-info
card_mod:
style: |
mushroom-badge-icon {
animation:
{% if is_state("binary_sensor.uptimekuma_camera_parking_rear", "off") -%}
pulse 3s infinite;
{% else -%} none
{% endif %}
}
@keyframes pulse {
50% { opacity: 0;}
}
Try this:
type: custom:mushroom-template-card
entity: binary_sensor.uptimekuma_camera_parking_rear
icon: mdi:cctv
icon_color: teal
badge_icon: mdi:close
badge_color: red
tap_action:
action: more-info
card_mod:
style: |
mushroom-badge-icon {
{% if is_state("binary_sensor.uptimekuma_camera_parking_rear", "off") -%}
animation: pulse 3s infinite;
{% else -%}
display: none;
{% endif %}
}
@keyframes pulse {
50% { opacity: 0;}
}
Thank You, it worked.
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.tv_ruimte
icon: mdi:numeric-1-circle-outline
icon_color: >
{% if state_attr("climate.tv_ruimte",'fan_mode') == '1' %}
[255, 153, 153]
{% else %}
[84, 84, 84]
{% endif %}
alignment: end
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.airco_tvhoek_ventilatorsnelheid_20
Mushroom card… On press I want to run a script.
this is the script:
alias: airco_tvhoek_ventilatorsnelheid_20
sequence:
- service: climate.set_fan_mode
metadata: {}
data:
fan_mode: "1"
target:
entity_id: climate.tv_ruimte
mode: single
icon: mdi:fan
When it runs the script, it sets the climate.tv-ruimte to off. when I look at the script, it has never run before
what is wrong here ?
edit solution:
it was the indentation of the tap action…
OK I am now kind of wondering if either the manner in which I am allowed to change the chips icon color is different completely or I need to try to figure out how to do it in card mod? No matter how many different ways I try to edit it, I continue to get no color change, but the rotation I have in card mod works without any issues.
Is anyone able to see what I may be doing wrong?
- type: template
entity: switch.bedroom_fan
icon: mdi:fan
content: ''
icon_color: >-
{% set _state=states('switch.bedroom_fan') %} {% if _state=="on"
%} {{'#f92aad'}} {% elif _state=="off" %} {{'#475c31'}} {% else
%} red {% endif %}
tap_action:
action: toggle
card_mod:
style:
div:
mushroom-template-chip:nth-child(4):
$:
mushroom-chip: |
ha-state-icon {
{% set _state = states('switch.bedroom_fan') %}
{% if _state == "on" %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
It’s just the way you are coding the colors. If you remove the hex and use simple colors, the code works fine.
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.bedroom_fan
icon: mdi:fan
content: ''
icon_color: >-
{% set _state=states('fan.bedroom_fan') %}
{% if _state=="on" %} yellow
{% elif _state=="off" %} blue {% else
%} green {% endif %}
tap_action:
action: toggle
card_mod:
style:
div:
mushroom-template-chip:nth-child(4):
$:
mushroom-chip: |
ha-state-icon {
{% set _state = states('switch.bedroom_fan') %}
{% if _state == "on" %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
You icon color code doesn’t need to be that complicated
icon_color: |-
{%- if is_state('fan.bedroom_fan', 'on') %}
#f92aad
{%- elif is_state('fan.bedroom_fan', 'off') %}
#475c31
{% else %}
green
{% endif %}
1 Like
For some reason neither of those options that are working for you will work for me:
Is it possible that the theme colors are forcing the icon color to remain static?
This is the code I have (the fan is on in the screenshot)
- type: template
entity: switch.bedroom_fan
icon: mdi:fan
content: ''
icon_color: |-
{%- if is_state('fan.bedroom_fan', 'on') %}
#f92aad
{%- elif is_state('fan.bedroom_fan', 'off') %}
#475c31
{% else %}
red
{% endif %}
sorry left my entity in the code