I like this alot, even better if the smaller icons like the motion etc could be pushed up higher to be along side the room/temperature. Great work however!
Thank you so much for your code - I did get it to work with a lightbulb, but I could not get it to work with my door lock.
For background info my Schlage lock is connected via my ring alarm(via zwave) using the ring-mqtt add-on, Iām not sure if that makes any difference here. But I did get this all to work - look at my reply to Boostin4HP - I put my code there as well.
It might help if you come across the same issue of it not working when you receive your hub.
This worked perfectly for me - Thank you Boostin4HP - this will add about 10lbs of boost to your ride for good will 
For everyone else here is the code for my Mushroom template card to get the door lock icon changing color based on state as well as icon and the wording to change based on state as well.
type: custom:mushroom-template-card
primary: Front Door Lock
secondary: |-
{% set state=states(entity) %}
{% if state=='locked' %}
Locked
{% elif state=='unlocked' %}
Unlocked
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: lock.front_door_lock
tap_action:
action: toggle
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
Thank you both image969 (James) and Boostin4HP for the help here, it is greatly appreciated and have these items working perfectly.
Actually used the same method for my Garage door connected via MyQ as well:
type: custom:mushroom-template-card
primary: Garage Door
secondary: |-
{% set state=states(entity) %}
{% if state=='closed' %}
Closed
{% elif state=='open' %}
Open
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='closed' %}
mdi:garage-variant
{% elif state=='open' %}
mdi:garage-open-variant-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: cover.garage_door
icon_color: |-
{% set state=states(entity) %}
{% if state=='closed' %}
green
{% elif state=='open' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: toggle
Hope this helps others as well.
5 Likes
Just wanted to share what I have right now.
I parted ways with conditional chips so the chips beneath the room cards will stay at there position and are only visible ifā¦
ā¦windows are open.
ā¦shades are open.
ā¦appliances are running.
ā¦fan is running.
ā¦vacuum is cleaning.
ā¦music or tv is playing.
And yes, washing machine and dryer are wobbling.
I have several testing cards that need to be integrated somewhere and I believe this will be a neverending story.
7 Likes
Thatās sexy is it possible to use the wobling also in a Chips card ? Can you please share the wobling part ?
That is a chips card.
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.washing_machine_state
icon: |-
{% if is_state('input_select.washing_machine_state', 'washing') %}
hue:room-laundry
{% else %}
{% endif %}
icon_color: green
card_mod: null
style: |
@keyframes wobbling {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: wobbling 1s linear infinite alternate;
{% if states('input_select.washing_machine_state') == 'washing' %}
animation-duration: 0.1s;
{%- else -%}
{%- endif %}
}
alignment: center
6 Likes
Would you mind sharing the code for your room buttons. I like that they show what is active in a room in 1 overview. Thnx
your cams all have the same resolution?
Of course. Hereās the one for my bedroom as is has a temperature sensor, 3 windows, shades and a media player.
The icon and content template are a bit complicated but I wanted to show which windows are open because it gets damn hot in there if I donāt close the right windows at the wright time.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: BEDROOM
secondary: ''
icon: |-
{% if is_state('light.BEDROOM', 'on') %}
mdi:bed-king
{% elif is_state('light.BEDROOM', 'off') %}
mdi:bed-king
{% elif is_state('light.BEDROOM', 'unavailable') %}
mdi:lightbulb-question
{% else %}
mdi:lightbulb-question
{% endif %}
entity: light.BEDROOM
icon_color: |-
{% if is_state('light.BEDROOM', 'on') %}
amber
{% elif is_state('light.BEDROOM', 'off') %}
disabled
{% elif is_state('light.BEDROOM', 'unavailable') %}
disabled
{% else %}
{% endif %}
fill_container: false
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /lovelace-mobile/BEDROOM
hold_action:
action: toggle
double_tap_action:
action: none
- square: false
columns: 4
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: null
double_tap_action:
action: none
content: '{{ states(''sensor.temperature_BEDROOM'') | float }}Ā°C'
entity: sensor.temperature_BEDROOM
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: null
icon: >-
{% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
phu:panel-glass-door-open
{% else %}
none
{% endif %}
icon_color: red
tap_action:
action: none
hold_action:
action: none
content: >-
{% if is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
all
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
LR
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
LS
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') and
is_state('binary_sensor.fenster_s_BEDROOM', 'on') %}
RS
{% elif is_state('binary_sensor.fenster_l_BEDROOM', 'on') %}
L
{% elif is_state('binary_sensor.fenster_r_BEDROOM', 'on') %}
R
{% elif is_state('binary_sensor.fenster_S_BEDROOM', 'on') %}
S
{% else %}
{% endif %}
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.sonnenschutz_BEDROOM
icon: >-
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:blinds-open
{% else %}
{% endif %}
icon_color: yellow
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.BEDROOM
icon: |-
{% if is_state('media_player.BEDROOM', 'playing') %}
mdi:music
{% else %}
{% endif %}
icon_color: |-
{% if is_state('media_player.BEDROOM', 'playing') %}
#d8a159
{% else %}
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
card_mod: null
style: |
ha-card {
--chip-box-shadow: 0px 0px;
}
alignment: center
5 Likes
At this rate you may as well put your entire lovelace.yaml on github and just point people there. LOL
2 Likes
No, I just changed the aspect ratio on some.
1 Like
Is there a reason why I canāt toggle two switches with one click?
type: custom:mushroom-entity-card
entities:
- entity: switch.privacy_mode_g3_vardagsrummet
- entity: switch.privacy_mode_g3_hallen
name: Privat
tap_action:
action: toggle
With one entity it works fine? Am I doing it wrong or is it a limitation in Mushroom?
Well done on the wobble! Is it possible to do that with the template card icon I wonder?
Try:
icon_color: |-
{% set icsp = states('sensor.solaredge_current_power')|float(0) %}
{% if icsp > '0' %}
green
{% else %}
red
{% endif %}
That helps!!
Thank you!!
Here goes to anyone looking:
- type: custom:mushroom-template-card
primary: 'Motion: {{ states("binary_sensor.bedroom_motion_sensor_occupancy") }}'
secondary: 'Battery: {{ states("sensor.bedroom_temp_sensor_battery_2") }}%'
entity: binary_sensor.bedroom_motion_sensor_occupancy
icon: mdi:motion
name: Motion
use_light_color: false
Expanding on @Boostin4HP card as a base, done the drop down as well, but with custom colours for the indoor/outdoor temperature and it just uses heatings (radiators), so no cooling.
Also merged in the climate title to flatten the card into a whole.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.home', 'hvac_action') }}
icon: |-
{% set mode = states('climate.home') %}
{% if mode == 'off' %}
mdi:radiator-off
{% elif mode == 'heating' %}
mdi:radiator
{% else %}
mdi:radiator-disabled
{% endif %}
icon_color: |-
{% set status = state_attr('climate.home','hvac_action') %}
{% if status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.home
header:
name: false
icon: false
decimals: '1'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '0.5'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.home
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, "current_temperature")}} Ā°C'
entity: climate.home
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }}{{ state_attr(entity, "unit_of_measurement") }}
Humidity
entity: sensor.humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
double_tap_action:
action: none
content: >-
{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}
Pressure
entity: sensor.average_indoor_pressure_downstairs
icon: mdi:gauge
icon_color: grey
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.average_indoor_temperature_downstairs
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Inside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:home-thermometer-outline
- type: custom:mushroom-template-card
entity: sensor.outdoor_temperature
primary: >-
{{ states(entity) }} {{ state_attr(entity,
"unit_of_measurement") }}
secondary: Outside
icon_color: |-
{% set temp = states(entity) %}
{% if temp >= '19' %}
red
{% elif temp >= '17' and temp < '19' %}
orange
{% elif temp == 'unknown' %}
grey
{% else %}
blue
{% endif %}
icon: mdi:thermometer
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.home
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
Auto low:
name: Auto
icon: mdi:fan-auto
Low:
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.average_indoor_temperature_downstairs
name: Inside Temperature
color: '#4caf50'
- entity: sensor.outdoor_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
13 Likes
Have to pinch this too. Stop it! 
1 Like
@rhysb trying to incorporate the adaptive lighting settings into the card as well, so have the following:
Any ideas how to get that rgb color matching working for the icon_color? Does the mushroom-template-card support returning rgb?
2 Likes
Do you mean from the icon color? Maybe, Iāll have a look laterā¦
Yer. Would appreciate it, it just says string in docs