The Mushroom template card gains a badge icon and colour

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?

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 %}
    green
{% elif states('sensor.liam_oneplus_6_battery_level') | float > 40 %}
    orange
{% else %}
    red
{% 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 %}
    mdi:battery-80
{% elif states('sensor.liam_oneplus_6_battery_level') | float > 40 %}
    mdi:battery-40
{% else %}
    mdi:battery-alert
{% 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.