The Mushroom template card gains a badge icon and colour

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.
Nov 30, 2022

I adore the Mushroom cards for the Home Assistant Dashboard. However, if there was one thing I would criticize them for, it would be their lack of customizability. The latest release, Mushroom version 1.10.0, counteracts this and allows you to add a splash of colour and a badge icon to template cards.

Besides the two additions to the Mushroom template card, there are no changes in this release. The developers, who do all of this in their spare time, have long attempted to make the Mushroom cards be as stable, clean, and simple as possible, before adding anything new. Despite this, the two new additions do help you individualize your Dashboard. You also might be pleased to hear that a graph card and plant card are already in development.

How to use the Mushroom template card badge icon and colour

Both the Mushroom template card badge icon and colour let you add some dynamism to your Home Assistant. This is done by allowing both values to make use of templates. You can, of course, just add a single colour and Material Design Icon and be done with it. But, where’s the fun in that?

A Mushroom Card for the Home Assistant Dashboard showing the user's name.

The card you can see in the screenshot is something I whipped together for demonstration purposes. You won’t be able to tell from the static screenshot, but the badge, seen in the upper-right corner above the icon, changes colour depending on whether I am home or not. This is done by adding the following string to the field titled badge colour:

{% if is_state('person.liam_alexander_colman', 'home') %} #d4c2f0 {% else %} #fdecd0 {% endif %}

You are not limited to just using web colours in the hexadecimal format. The same string works by just adding a colour’s name:

{% if is_state('person.liam_alexander_colman', 'home') %} green {% else %} red {% endif %}

In the same way, you are not limited to just two colours, but can, in fact, use as many colours as you wish. The following example would change the icon to green if my phone’s battery was between 60-100% charge, orange if it’s anywhere between 40-60%, and red if it was below 40%.

{% if states('sensor.liam_oneplus_6_battery_level') | float > 60 %}
{% elif states('sensor.liam_oneplus_6_battery_level') | float > 40 %}
{% else %}
{% endif %}

Incidentally, the same templates can also be used for the icon’s colour when using a template card. As I already mentioned in the introduction, you can use templates in the badge icon itself. If we take the above example, and use icons instead of colours, it would look like this:

{% if states('sensor.liam_oneplus_6_battery_level') | float > 60 %}
{% elif states('sensor.liam_oneplus_6_battery_level') | float > 40 %}
{% else %}
{% endif %}

Please make sure to remove any spaces when copying either of the latter two examples. For readability’s sake, I have formatted the code.

A screenshot showing how a Mushroom template card can be customized in the Home Assistant Dashboard.
Liam Alexander Colman, the author and maintainer of Home Assistant Guides.

About Liam Alexander Colman

Liam Alexander Colman has been using Home Assistant for various projects for quite some time. What started off with a Raspberry Pi quickly became three Raspberry Pis and eventually a full-blown server. I now use Unraid as my operating system, and Home Assistant happily runs in a Docker container. My personal setup includes many Zigbee devices as well as integrations with existing products such as my Android TV box. Read on to find out more on how I got started with Home Assistant.

Leave a comment

Share to...