Home Assistant dashboard card: Mushroom
Here you find Home Assistant (lovelace) dashboard examples related to the mushroom cards which you can easily add to your own dashboards.
Mushroom 
is a card which can let you add a small widget on your dashboard.
Click on one of these icons below to go to the corresponding example code:
The git repository of the Mushroom card is https://github.com/piitaya/lovelace-mushroom
Install the Mushroom card via this button
Custom styling
For some examples, some custom CSS styling is applied which isn’t possible by default.
You need the extra HACS integration card_mod. You can install it via this button
Table of Contents
Introduction
The mushroom card has a whole set of different card types. In my examples here, I only use two of them. If you want to know more about them all, check this page https://github.com/piitaya/lovelace-mushroom#cards
Cards
I show here some examples of the two cards, the Tile and Chip card.
Title card
The title card shows data based on a template.
What to wear when you go outside
Show what to wear for clothes when you go outside. You can change it the way you like or extend it by adding rain expectations.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-title-card
title: >2
Wear a {% if states('sensor.feels_like_temperature')|int <= 5 %}winter coat and gloves
{% elif states('sensor.feels_like_temperature')|int <= 12 %}jacket
{% elif states('sensor.feels_like_temperature')|int <= 16 %}sweater
{% elif states('sensor.feels_like_temperature')|int > 16 %}T-shirt
{% endif %} when you go outside. It feels as {{ states('sensor.feels_like_temperature')|int }} °C.
Welcome text and weather forecast for today (Dutch)
Dutch welcome text based on the time of the day, and the name of the logged-in user.
Then show also the minimal and maximum temperature for today and a textual description of the weather.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-title-card
title: >2
{%- if now().hour < 12 -%}Goeiemorgen
{%- elif now().hour < 18 -%}Goeiemiddag
{%- else -%}Goeieavond{%- endif -%}, {{user}}.
Vandaag is het tussen de {{states('sensor.meteoserver_d0tmin')}} en de
{{ states('sensor.meteoserver_d0tmax') }} °C
met {{ states('sensor.meteoserver_verw').lower() }}.
Time and date with large font
Larger font size to show the time and the full date.
# Sourcecode by vdbrink.github.io
# configuration.yaml
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: '{{now().strftime(''%H:%M'')}}'
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 90px !important;
}
- type: custom:mushroom-title-card
title: {{states('sensor.date_only_formatted')}}
alignment: center
card_mod:
style: |
ha-card {
--title-font-size: 30px !important;
}
Are you looking for more template examples? Check also my dedicated page about templates!
- Count the number of lights on
- Calculate temperature differences
- Minutes since mail is delivered
- What to wear outside
- Expected rain amount
- Rain intensity
- DIY Sink leak status
- DIY Chair occupancy status
Chips card
Chips cards are a small icon that indicates a status.
CO2 colored icon indicator based on a number
Show a green icon, without any text, if the level is less the 800 ppm, less than 1200 ppm yellow, less than 1500 ppm red.
Create your own CO2 sensor (SCD40)
Create your own CO2 sensor (SenseAir S8)
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:molecule-co2
icon_color: |-
{% if is_state('sensor.senseair_co2_value', 'unavailable') %}
blue
{% elif states('sensor.senseair_co2_value')|int > 1500 %}
red
{% elif states('sensor.senseair_co2_value')|int > 1200 %}
orange
{% elif states('sensor.senseair_co2_value')|int > 800 %}
yellow
{% else %}
green
{% endif %}
entity: sensor.senseair_co2_value
content: ''
Weather alarm state colored icon indicator based on a value
Show a green icon, when the value is Code groen, yellow for Code geel and red for Code rood.
The use entity here is based on the KNMI weather alarm scraper.
You can decide what happens when you click on it, in this example you redirect to the website of the KNMI where you can see all the details about the current weather alarm status.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:weather-lightning-rainy
icon_color: |-
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
green
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
yellow
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
red
{% else %}
gray
{% endif %}
entity: sensor.knmi_weercode
content: ''
tap_action:
action: url
url_path: https://www.knmi.nl/nederland-nu/weer/waarschuwingen/overijssel
Bigger icon
Show the mushroom icon in a mush bigger size with the card_mod HACS integration, see https://github.com/thomasloven/lovelace-card-mod for more info.
Install card_mod via this button
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- chip:
type: template
icon: mdi:weather-lightning-rainy
icon_color: |-
{% if is_state('sensor.knmi_weercode', 'Code groen') %}
green
{% elif is_state('sensor.knmi_weercode', 'Code geel') %}
yellow
{% elif is_state('sensor.knmi_weercode', 'Code rood') %}
red
{% else %}
1C1C1C
{% endif %}
entity: sensor.knmi_weercode
content: ""
card_mod:
style: |
ha-card {
--chip-icon-size: 80px;
width: 100px !important;
height: 100px !important
}
Nice weather (only an icon)
Show (it only based on a condition) only a green icon, without any text, of a seat when the custom binary sensor nice_outside is on Otherwise this icon isn’t visible.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.nice_outside
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:seat
entity: binary_sensor.nice_outside
content: ''
Temperature (custom icon)
Show a (outdoor/room/pool/etc) temperature.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.temperature_outside_feels_like
icon: mdi:sun-thermometer
Temperature (colored icon and text)
Set the icon and text color based on the entity value.
To override the colors, you need the extra HACS integration card_mod. You can install it via this button
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.tempest_temperature_feels_like_rounded
icon: mdi:hand-back-right
tap_action:
action: navigate
navigation_path: /lovelace-diverse/test2
card_mod:
style:
.: |
ha-card {
--icon-primary-color:
{% if is_state('sensor.tempest_temperature_feels_like_rounded', 'unavailable') %}
#1C1C1C;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 5 %}
blue;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 14 %}
yellow;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 18 %}
orange;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int > 25 %}
red;
{% else %}
green;
{% endif %}
--text-color:
{% if is_state('sensor.tempest_temperature_feels_like_rounded', 'unavailable') %}
gray;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 5 %}
blue;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 14 %}
yellow;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int <= 18 %}
orange;
{% elif states('sensor.tempest_temperature_feels_like_rounded')|int > 25 %}
red;
{% else %}
green;
{% endif %}
}
Person status
Show this icon only when I’m at home.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.vdbrink
state: home
chip:
type: entity
entity: person.vdbrink
name: Me
use_entity_picture: true
hide_state: true
hide_name: false
Persons count in a specific zone
Show the number of persons which are currently this in the zone home.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: entity
entity: zone.home
Door open (custom picture)
Show a custom picture when the front door is open. Otherwise hide it.
# Sourcecode by vdbrink.github.io
# Dashboard card code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.contact_front_door_contact
state: 'on'
chip:
type: template
picture: https://img.icons8.com/plasticine/344/door-opened.png
content: Open
More examples
Looking for more examples? Check this link:
<< See also my other Home Assistant pages