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 will earn a commission, at no additional cost to you. Read my full disclosure here.

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.

Mushroom cards remain as stable as ever

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.

Creating a dynamic badge

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 %}

Creating a dynamic icon

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.
A portrait photo oif Liam Alexander Colman, the author, creator, and owner of Home Assistant Guide wearing a suit.

About Liam Alexander Colman

is an experienced Home Assistant user who has been utilizing the platform for a variety of projects over an extended period. His journey began with a Raspberry Pi, which quickly grew to three Raspberry Pis and eventually a full-fledged server. Liam's current operating system of choice is Unraid, with Home Assistant comfortably running in a Docker container.
With a deep understanding of the intricacies of Home Assistant, Liam has an impressive setup, consisting of various Zigbee devices, and seamless integrations with existing products such as his Android TV box. For those interested in learning more about Liam's experience with Home Assistant, he shares his insights on how he first started using the platform and his subsequent journey.


Leave a comment

Share to...