You are awesome man. It worked like a charm. Thank you very much for your help.
Thanks Mate. IĀ“m stupid.
Yes i used this code. But: I copied the title with it which of course didnt worked 
Saved the day!
Here is my combination welcome card. Tried to find a good way to display family status with more than two members. I will be adding better away & location status once I work that out.
Light mode:
Dark mode:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: alarm-control-panel
entity: alarm_control_panel.home_alarm
content_info: none
name: Alarm
- type: template
entity: lock.front_door
icon: >-
{{ 'mdi:lock' if is_state('lock.front_door', 'locked') else
'mdi:lock-open' }}
icon_color: '{{ ''green'' if is_state(''lock.front_door'', ''locked'') else ''red'' }}'
content: null
tap_action:
action: more-info
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: more-info
entity: group.all_lights
icon_color: grey
- type: conditional
conditions:
- entity: group.all_windows
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:window-open
content: >-
{{ expand(states.group.all_windows) | selectattr( 'state', 'eq',
'on') | list | count }}
tap_action:
action: more-info
entity: group.all_windows
- type: conditional
conditions:
- entity: group.external_doors
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:door-open
content: >-
{{ expand(states.group.external_doors) | selectattr( 'state',
'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: group.external_doors
- type: conditional
conditions:
- entity: group.water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.water_leak
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
card_mod:
style: |
:host {
--ha-card-background: var(--card-background-color);
}
- square: false
columns: 2
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.rhys
state: home
chip:
type: entity
entity: person.rhys
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sarah
state: home
chip:
type: entity
entity: person.sarah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.elijah
state: home
chip:
type: entity
entity: person.elijah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.michaela
state: home
chip:
type: entity
entity: person.michaela
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 5px;
margin-bottom: 10px;
}
alignment: start
card_mod:
style: |
ha-card {
margin-left: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.rhys
state_not: home
chip:
type: entity
entity: person.rhys
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.rhys', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.rhys', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.sarah
state_not: home
chip:
type: entity
entity: person.sarah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.sarah', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.sarah', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.elijah
state_not: home
chip:
type: entity
entity: person.elijah
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.elijah', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.elijah', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
- type: conditional
conditions:
- entity: person.michaela
state_not: home
chip:
type: entity
entity: person.michaela
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.michaela', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.michaela', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 10px;
}
alignment: end
card_mod:
style: |
ha-card {
margin-right: 8px;
}
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}!
{% elif (time >= 12) %}
Good Afternoon, {{user}}!
{% elif (time >= 5) %}
Good Morning, {{user}}!
{% else %}
Hello, {{user}}
{% endif %}
subtitle: ''
- type: custom:simple-weather-card
entity: weather.dark_sky
name: in Auckland
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
background: var(--card-background-color);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
}
Edit: Tidy up code a bit
62 Likes
This is amazing and exactly what Iāve wanted, and not had the ability to do, so Iāve stolen it.
Got your dashboard on GitHub?
7 Likes
No sorry, not yet. Iāll keep posting more Mushroom cards as I refine them 
4 Likes
This tweak adds color to the card background. The color light version will adjust with the light color.
It looks great in dark mode, but not so much in light mode. Does anyone know how to detect the dark/light mode of lovelace?
Normal light version:
- type: custom:mushroom-light-card
entity: light.elijahs_light
name: Light
fill_container: false
hide_state: false
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
Colored light version:
- type: custom:mushroom-light-card
entity: light.elijahs_night_light
name: Night Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: true
collapsible_controls: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
}
22 Likes
Made this Thermostat Card today with some of the code I saw in here if anyone wants it.
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
style: |
ha-card {
padding-bottom: 1px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.thermostat', 'hvac_action') }}
icon: |-
{% set mode = states('climate.thermostat') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.thermostat','hvac_action') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif 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: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.thermostat
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
alignment: justify
chips:
- type: template
entity: climate.thermostat
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} Ā°F'
entity: climate.thermostat
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 %}
- type: weather
entity: weather.karr_daynight
show_conditions: true
show_temperature: true
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.karr_relative_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
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.thermostat
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
cool:
name: Cool
heat_cool:
name: Auto
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.thermostat_air_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.karr_temperature
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
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.thermostat
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.thermostat_air_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.karr_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
74 Likes
@r_s_bell can you please post some code for the vertical and horizontal configurations of your room chips? I canāt get it working to get these in a kind of table.
Thanks
HI all,
Iām using following code
- type: custom:mushroom-template-card
entity: sensor.solaredge_current_power
icon: mdi:solar-power
icon_color: |-
{% set icsp=states('sensor.solaredge_current_power') %}
{% if icsp='0' %}
red
{% else %}
green
{% endif %}
The icon remains WHITE
For all other sensors, this works, except for this one. I believe it has something to do with the current status 0.0, but Iām not sure.
Can anyone help ?
Thanks in advance !
Kr,
Bart
Thisāll work:
{% set icsp = states('sensor.solaredge_current_power') %}
{% if icsp == '0.0' %}
red
{% else %}
green
{% endif %}
Looking for clarificationā¦
I have read and followed all of the posts here and still uncertain on status of card-mod with these mushroom cards and the mushroom theme.
My goal is being able to modify the font sizes on mushroom template cards on a per card basis. While in my tests I am able to change the card color, font sizing eludes me. And while I understand that card-mod is not supported by the author here, I am wondering what others are using for style customization at the card level.
Thanks and cheers!
Wow, really nice!!! Iām going to try to get this working for me too. Again; really nice!
1 Like
For me the green icon is dependent if I am in a zone or not. Is there a way to specify to only have it be green when I am in the zone designated home?
Iām not sure right now but isnāt it?
- home = green
- not_home = red
- specific zone= blue
And no, I donāt know how to change that, sorry.
2 Likes
Been trying for hours to get an image to show upā¦ anyone have a suggestion?
Thank you!
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.moon_phases
Supposed to show the current moon but itās not showing ā¦ I want it to show up as part of the chip card I haveā¦ but the image will not show up.
Thank you!
1 Like
Hi everyone,
I just start using the mushroom cards and i think its great, the only that borders me is the the GUI does not show as it should be (see pic) is there a way to fix this or do i miss something simple
thanks
I canāt see anything that stands out. Whatās bothering you?
Thatās because you chose a template card and there you can do what the title promises: template
To start you probably might choose the mushroom-entity-card or something to have the more visual editor :
Soooooooo apparently you canāt show an image with a mushroom chip card?
Thanks, I thought i saw some tutorials where they look different even when the information is the same.