Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

burg93 · April 6, 2022, 8:53am

So glad I came across this on Reddit! I was looking into ui-minimalist and whilst I am a Software Engineer by trade it was just too time consuming handling all the yaml by hand for my basic needs to just create a nice but simple mobile UI. This gives me a very similar look at a fraction of effort (and time) so thanks!

I do have a couple questions/thoughts though:

For my lights section I currently have a vertical stack with 3 horizontal stacks containing 3 light cards in each, essentially a 3 x 3 grid with a square per room. I do like the brightness/temp bar but ideally I’d see that hidden until that light/group is turned on, that would then show the brightness bar for that card. Some lights are used less than others so at the moment having the bar shown constantly for all of them takes up quite a lot of mobile screen space.
I can’t seem to find out how you’ve got the alarm card to hide the PIN panel… I just want a nice alarm square with arm/disarm buttons like in your screenshot as we don’t use the PIN but I can’t find out how.
It would be handy to be able to set the secondary information of an entity card to a custom template. For my use case I’m using the entity card to display a climate entity - which clicks through to a temps page. Currently it only allows me to show the state as secondary which in this case is “Auto” where in reality I want that to display the current thermostat temperature. I’ve swapped the card to a normal entity one for now to do it but it be good to have it built in so all my cards look the same. Or even better if I could change the icon to the current temp! I also have a doorbell “last rang” entity but ideally the card would show a combination of the last rang entity and the battery entity so I could have it all in the one card so it would be handy for that too without needing to use custom-card.

Thanks!

FreakLikeMe · April 6, 2022, 2:19pm

Do this with Conditional Cards

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: light.example
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.example
      show_brightness_control: true
  - type: conditional
    conditions:
      - entity: light.example
        state: 'off'
    card:
      type: custom:mushroom-light-card
      entity: light.example

To do this you need to have no pin configured.
Use the Mushroom Template card. all items can be configured using templates. here is an example with my climate card.

type: custom:mushroom-template-card
icon: mdi:thermostat
icon_color: |-
  {% set state=states(entity) %}
  {% if state=='cool' %}
  blue
  {% elif state=='heat' %}
  red
  {% else %}
  grey
  {% endif %}
tap_action:
  action: more-info
layout: horizontal
multiline_secondary: false
secondary: |
  Set · {{ states(entity) }} · {{state_attr(entity, 'temperature')}}°
primary: >-
  {{state_attr(entity, 'current_temperature')}}° · {{state_attr(entity,
  'friendly_name')}}
entity: climate.game_room

Lunkobelix · April 6, 2022, 7:22pm

Does anyone know why some icons have the nice circle around the icon and some don’t?

mase · April 6, 2022, 8:54pm

i know there is a way to use entity_id to color an icon, but i just can´t figure it out.

this is what i got right now:

type: custom:mushroom-template-card
primary: Wohnung
icon: fas:home
layout: vertical
multiline_secondary: false
tap_action:
  action: navigate
  navigation_path: wohnung
icon_color: |
  {{ '#ff9800' if is_state('light.alle_lichter','on') else '' }}
entity: light.alle_lichter
double_tap_action:
  action: toggle

i want to get something like {{ '#ff9800' if is_state(entity_id,'on') else '' }}, someone knows how to code should look like?

Nameless · April 7, 2022, 12:33am

This works for me.

    icon_color: |-
      {% set state=states('light.tims_office_lamp_2_sengled') %}
      {% if state=='on' %}
      green
      {% elif state=='off' %}
      blue
      {% else %}
      red
      {% endif %}

mase · April 7, 2022, 6:25am

you got me wrong
this code works for me: {{ '#ff9800' if is_state('light.alle_lichter','on') else '' }}

but since i want to add it to a few cards i´d like to get rid of light.alle_lichter and replace it with something like entity_id so i don´t have to change it for every card.

piitaya · April 7, 2022, 9:22am

Hi
To celebrate the new 2022.4 HA version, let’s introduce the new update card in 1.4.0 Mushroom version! Update entities are supported as well by the entity card and entity chip.

Capture d’écran 2022-04-07 à 10.03.20

cromelex · April 7, 2022, 10:46am

Just wondering if someone can help me with a small thing using this.

I have a title card where I use a subtitle with:

Currently it is {{ state_attr(‘weather.home’, ‘temperature’) }}ºC and {{ states(‘weather.home’) }} outside.

This render as:
Currently it is 7.3ºC and partlycloudy outside.

How do I handle that states(‘weather.home’) in terms of splitting the string to “partly cloudy” instead of it displaying as is? (which is what the state is). Does anyone know? I went through the HASS documentation but this isn’t clear at all for me.

I find these cards very easy to use, but I think it would be beneficial if there were a few examples of customisations with the code available on the documentation.

Thanks

cloudbr34k · April 7, 2022, 12:23pm

yeah you can, i have this used on alot of chips

type: template
entity: alarm_control_panel.aarlo_arlo_hub
icon: |
  {% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
  {% if state=='disarmed' %}
  mdi:shield-off
  {% elif state=='armed' %}
  mdi:shield-lock
  {% else %}
  mdi:shield-alert-outline
  {% endif %}
icon_color: |-
  {% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
  {% if state=='disarmed' %}
  red
  {% elif state=='armed' %}
  green
  {% else %}
  red
  {% endif %}
content: |-
  {% set state=states('alarm_control_panel.aarlo_arlo_hub') %}
  {% if state=='disarmed' %}
  Arlo Disarmed
  {% elif state=='armed' %}
  Arlo Armed
  {% else %}
  Unavailable
  {% endif %}
tap_action:
  action: more-info

Lunkobelix · April 7, 2022, 12:58pm

Looks like you’ve got control of how to use icons Do you know how I can have the icons show up nicely both in light and dark themes? So in the dark theme they should be white and in the light theme the icon should be dark.

dicko · April 7, 2022, 1:12pm

Is there a mushroom button card or work around for just links to another dashboard ? After watching Zak Barratt, it became clear that we don’t really want to use an entity to open another dashboard to a room for example when just a button and the same type of icon theme would suffice.

The Home Assistant Button card looks massive and out of place when everything else is all mushroom as you can see.

Thanks and keep up the great work

Martyn

cloudbr34k · April 7, 2022, 1:18pm

nah i barely understood this lol

capandcamera · April 7, 2022, 1:28pm

I use a mushroom template card for this:

              - type: custom:mushroom-template-card
                icon: mdi:desk
                icon_color: >
                  {% if is_state('sensor.office_presence', 'Motion Detected') -%}
                    orange
                  {%- else -%}
                    blue
                  {%- endif %}
                primary: Office
                tap_action:
                  action: navigate
                  navigation_path: "office"
                card_mod:
                  style: |
                    ha-card {
                      --card-primary-font-size: 12px;
                      --card-secondary-font-size: 12px;
                    }

and Example:

Lunkobelix · April 7, 2022, 1:32pm

My bad
So I have defined icon color to be white and it looks great in my dark theme. When I toggle to light theme the icon is white and so is the background. So my question is how I can have the color of the icon change dynamic depending on if the theme is light or dark.

Something like picking up the color of the icon dynamically like this pseudo code icon-color: var(--icon-color)

If still unclear then let’s move on and skip this one

Edit:
Realize that this might be an issue that I only have outside of Mushroom so let’s leave it there

capandcamera · April 7, 2022, 1:40pm

One possibility (Unsure if it will work but a theory)

You may be able to set the variable in your theme as thats where it splits into light / dark

modes:
   light: {}
   dark: {}

Then refer to that variable in the dashboard

dicko · April 7, 2022, 3:07pm

capandcamera:

              - type: custom:mushroom-template-card
                icon: mdi:desk
                icon_color: >
                  {% if is_state('sensor.office_presence', 'Motion Detected') -%}
                    orange
                  {%- else -%}
                    blue
                  {%- endif %}
                primary: Office
                tap_action:
                  action: navigate
                  navigation_path: "office"
                card_mod:
                  style: |
                    ha-card {
                      --card-primary-font-size: 12px;
                      --card-secondary-font-size: 12px;
                    }

Brilliant. Thank you

Sam04 · April 7, 2022, 3:21pm

it would be awesome if you could add the “effect” drop-down menu to light cards

henalmeida1978 · April 7, 2022, 4:46pm

Hello dicko, can you help me with the rubbish colelction etc? How have you done it?

thanks

Fabian_V · April 7, 2022, 5:34pm

effect drop down?

Sam04 · April 7, 2022, 5:54pm

Screenshot_20220407-1952441080×1475 44.4 KB