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

[Marauder2]

I’m trying to re-create you have with a chip button at the top that displays the number of lights on and then when you tap it, has a popup with lights that are on. Using this code I am able to get a popup with the title, but no lights show. Any ideas?

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.lights_on_count
    icon_color: yellow
    icon: mdi:lightbulb
    tap_action:
      action: call-service
      service: browser_mod.popup
      data:
        title: Lights On
        card:
          type: entity-filter
          entities:
            - group.all_lights
            - light.nightlight
            - switch.front_door_light
            - light.lightstrip
          state_filter:
            - 'on'

Edit - I figured it out. I couldn’t get a simple entities card to work in the popup either, so I dug around the browser_mod documentation (which I should have done in the first place rather than simply copy-paste…).

So here is a short summary for the newer people like me, be careful when copy pasting code that has been provided in this thread as browser_mod has been updated since most of the posts were made, and the way you call the popup service has been changed.

From:

action: fire-dom-event
browser_mod:
  command: popup
  title: My title
  card:
    type: ...etc...
type or paste code here

to

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: My title
    content:
      type: ...etc...

I personally caught the command change, but missed changing card to content which is why the popup worked but not what was in the popup… This was my final config:

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.lights_on_count
    icon_color: yellow
    icon: mdi:lightbulb
    tap_action:
      action: call-service
      service: browser_mod.popup
      data:
        title: Lights On
        content:
          type: entity-filter
          entities:
            - group.all_lights
            - light.nightlight
            - switch.front_door_light
            - light.lightstrip
            - light.staircase
            - light.desk_light
          state_filter:
            - 'on'

[drpau]

Love the mushroom design for HA and I’m a newly convert from Homebridge. All round great stuff.

Im trying to do something reasonably simple which is: Display the color of the icon, based on the battery level of my wireless door bell, And - have the battery level as the Secondary Information.

Im sure its easy as all hell - I have the battery icon working fine, but I just cant get the secondary information working. Im sure its just as simple as getting the value, and presenting it (but I don’t know how to do it - being new and all to HA from homebridge).

Many thanks for help!

type: custom:mushroom-template-card
primary: Front Doorbell
secondary: <<MAKE THE BATTERY PERCENTAGE END UP HERE>>
icon: |-
  {% if states('sensor.front_door_battery') | float > 80 %}
    mdi:battery-80
  {% elif states('sensor.front_door_battery') | float > 60 %}
    mdi:battery-60
  {% elif states('sensor.front_door_battery') | float > 40 %}
    mdi:battery-40
  {% elif states('sensor.front_door_battery') | float > 20 %}
    mdi:battery-20
  {% else %}
    mdi:battery-10
  {% endif %}
icon_color: |-
  {% if states('sensor.front_door_battery') | float > 80 %}
    green
  {% elif states('sensor.front_door_battery') | float > 60 %}
    yellow
  {% elif states('sensor.front_door_battery') | float > 40 %}
    orange
  {% elif states('sensor.front_door_battery') | float > 20 %}
    red
  {% else %}
    black
  {% endif %}
entity: sensor.front_door_battery

[StefanHabel]

Have the same problem, just a red exclamation mark.

The layout-card was missing.

[Roflcopterer]

It’s based on a css grid using the Layout card:

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

I’ve changed the pagelayout to “Grid (layout-card)” and used this as a custom grid: grid-template-columns: auto 380px 380px auto grid-template-rows: auto place-items: center stretch grid-template-areas: | ". chips chips ." ". title1 title1 ." ". links1 rechts1 ." ". title2 title2 ." ". links2 rechts2 ." mediaquery: "(max-width: 600px)": grid-template-columns: 100% grid-template-areas: | "chips" "title1" "links1" "rechts1" "title2" "links2"…

[rhysb (Rhys)]

Try like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: |
      {% if is_state('sensor.washer_status', 'Done') %}
        mdi:washing-machine-alert
      {% elif is_state('sensor.dryer_status', 'Done') %}
        mdi:tumble-dryer-alert
      {% elif is_state('sensor.washer_status', 'Running') %}
        mdi:washing-machine
      {% elif is_state('sensor.dryer_status', 'Running') %}
        mdi:tumble-dryer
      {% else %}
        mdi:washing-machine-off
      {% endif %}
    icon_color: |
      {% if is_state('sensor.washer_status', 'Done') or
            is_state('sensor.dryer_status', 'Done') %}
        red
      {% elif is_state('sensor.washer_status', 'Running') or
              is_state('sensor.dryer_status', 'Running') %}
        orange
      {% else %}
        blue
      {% endif %}
    layout: horizontal
    primary: Waschküche
    tap_action:
      action: navigate
      navigation_path: laundry
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: none
        tap_action:
          action: none
      - type: template
        icon: |
          {% if is_state('sensor.washer_status', 'Done') %}
            mdi:washing-machine-alert
          {% elif is_state('sensor.washer_status', 'Running') %}
            mdi:washing-machine
          {% else %}
            mdi:washing-machine-off
          {% endif %}
        icon_color: |
          {% if is_state('sensor.washer_status', 'Done') %}
            red
          {% elif is_state('sensor.washer_status', 'Running') %}
            orange
          {% elif is_state('sensor.washer_status', 'Off') %}
            #646464
          {% else %}
            white
          {% endif %}
        content_info: none
      - type: template
        icon: |
          {% if is_state('sensor.dryer_status', 'Done') %}
            mdi:tumble-dryer-alert
          {% elif is_state('sensor.dryer_status', 'Running') %}
            mdi:tumble-dryer
          {% else %}
            mdi:tumble-dryer-off
          {% endif %}
        icon_color: |
          {% if is_state('sensor.dryer_status', 'Done') %}
            red
          {% elif is_state('sensor.dryer_status', 'Running') %}
            orange
          {% elif is_state('sensor.dryer_status', 'Off') %}
            #646464
          {% else %}
            white
          {% endif %}
        content_info: none
    card_mod:
      style:
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            {{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('sensor.washer_status', 'Running') }}
            transform-origin: 50% 110%;
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }
        mushroom-template-chip:nth-child(3)$: |
          ha-icon {
            {{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_status', 'Running') }}
            transform-origin: 50% 65%;
          }
          @keyframes shake {
            0%, 100% { transform: rotate(4deg); }
            50%  { transform: rotate(-4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }

[rhysb (Rhys)]

Thanks to @piitaya for adding all the Mushroom colors to HA as RGB variables. You don’t have to define them in your theme as mush-rgb-<color> anymore, and you can use them with any card.

The new color variables are:

    --rgb-primary-color
    --rgb-accent-color
    --rgb-disabled-color
    --rgb-primary-text-color
    --rgb-secondary-text-color
    --rgb-text-primary-color
    --rgb-card-background-color
    --rgb-red-color
    --rgb-pink-color
    --rgb-purple-color
    --rgb-deep-purple-color
    --rgb-indigo-color
    --rgb-blue-color
    --rgb-light-blue-color
    --rgb-cyan-color
    --rgb-teal-color
    --rgb-green-color
    --rgb-light-green-color
    --rgb-lime-color
    --rgb-yellow-color
    --rgb-amber-color
    --rgb-orange-color
    --rgb-deep-orange-color
    --rgb-brown-color
    --rgb-grey-color
    --rgb-blue-grey-color
    --rgb-black-color
    --rgb-white-color

[rhysb (Rhys)]

You can do it vertically like this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    primary: Calendar Clock
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            clip-path: polygon(0 100%, 0 0, 100% 0, 100% 67%, 85% 69%, 73% 52%, 59% 52%, 59% 72%, 77% 81%, 85% 68%, 100% 67%, 100% 100%);
          }
  - type: custom:mushroom-template-card
    icon: mdi:calendar-clock
    icon_color: purple
    layout: vertical
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: spin 1s linear infinite;
            transform-origin: 67% 67%;
            clip-path: circle(17% at 67% 67%);
          }
          .shape {
            --shape-color: none;
          }
        .: |
          ha-card {
            height: 66px;
            top: -99px;
          }
card_mod:
  style: |
    ha-card {
      height: 99px;
    }

[Tyfoon]

Working hard over the last few days to ‘convert’ my dashboards to more a mushroom look and feel. One of the cards I have created (=copy paste from other and changed some things) is below.

My question is on the sensor values on top of the cards: what I struggle to find is how I can change a) the number of decimals in the sensors on top and b) the corresponding unit (eg. not show the unit or show a unit I prefer).

How it looks now:

The code:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.benext_solar_electric_production_w
        primary_info: state
        secondary_info: name
        name: Now
        icon: mdi:sun-wireless
      - type: custom:mushroom-entity-card
        entity: sensor.solarday
        primary_info: state
        secondary_info: name
        name: Daily
        icon: mdi:sun-clock
      - type: custom:mushroom-entity-card
        entity: sensor.solar_net
        primary_info: state
        secondary_info: name
        name: NET
        icon: mdi:solar-power
  - type: custom:apexcharts-card
    graph_span: 1d
    apex_config:
      chart:
        height: 150px
        fontFamily: Raleway,sans-serif
      legend:
        show: false
    experimental:
      color_threshold: true
      brush: true
    brush:
      selection_span: 1d
    header:
      show: false
      title: Server Rack
      show_states: false
      colorize_states: true
    yaxis:
      - id: first
        decimals: 1
        apex_config:
          tickAmount: 2
      - id: second
        opposite: true
        decimals: 0
        apex_config:
          tickAmount: 2
    series:
      - entity: sensor.power_consumption
        name: Power
        yaxis_id: first
        show:
          legend_value: false
        type: column
        group_by:
          func: avg
          duration: 60min
        color_threshold:
          - value: 0
            color: '#228B22'
          - value: 0.1
            color: '#d35400'
          - value: 1.5
            color: '#c0392b'
      - entity: sensor.benext_solar_electric_production_w
        name: Solar
        yaxis_id: second
        color: '#00bb33'
        show:
          legend_value: false
        group_by:
          func: avg
          duration: 60min

[T1ppes]

Thanks for your support. The icons are now wobbling, but I had already a

card_mod:
  style:

defined against the chips with the following input:

card_mod:
  style: |
    ha-card {
      --chip-box-shadow: none;
      --chip-background: none;
    }

It is only taking one or the other i.e. when the icons are working, the chips circle are no longer invisble. How do I combine the two card_mods?

[rhysb (Rhys)]

It is simple once you learn how

type: custom:mushroom-template-card
primary: Front Doorbell
secondary: '{{ states(entity) | int }} %'
icon: |-
  {% if states(entity) | float > 80 %}
    mdi:battery-80
  {% elif states(entity) | float > 60 %}
    mdi:battery-60
  {% elif states(entity) | float > 40 %}
    mdi:battery-40
  {% elif states(entity) | float > 20 %}
    mdi:battery-20
  {% else %}
    mdi:battery-10
  {% endif %}
icon_color: |-
  {% if states(entity) | float > 80 %}
    green
  {% elif states(entity) | float > 60 %}
    yellow
  {% elif states(entity) | float > 40 %}
    orange
  {% elif states(entity) | float > 20 %}
    red
  {% else %}
    black
  {% endif %}
entity: sensor.front_door_battery

[rhysb (Rhys)]

You can combine the card_mod like this:

    card_mod:
      style:
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            {{ 'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if is_state('sensor.washer_status', 'Running') }}
            transform-origin: 50% 110%;
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }
        mushroom-template-chip:nth-child(3)$: |
          ha-icon {
            {{ 'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if is_state('sensor.dryer_status', 'Running') }}
            transform-origin: 50% 65%;
          }
          @keyframes shake {
            0%, 100% { transform: rotate(4deg); }
            50%  { transform: rotate(-4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }
        .: |
          ha-card {
            --chip-box-shadow: none;
            --chip-background: none;
          }

[rhysb (Rhys)]

You would need to use Mushroom Template cards and do something like this:

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    entity: sensor.benext_solar_electric_production_w
    icon: mdi:sun-wireless
    secondary: Now
    primary: '{{ states(entity) | float | round(0) }} W'
    icon_color: blue
  - type: custom:mushroom-template-card
    entity: sensor.solarday
    icon: mdi:sun-clock
    secondary: Daily
    primary: '{{ states(entity) | float | round(2) }} kWh'
    icon_color: blue
  - type: custom:mushroom-template-card
    entity: sensor.solar_net
    icon: mdi:solar-power
    secondary: NET
    primary: '{{ states(entity) }}'
    icon_color: blue

[drpau]

Thank you so much - it IS simple, can you point me in the right direction of where i can reference this in the future or read from? be great to learn the different bits to pull together. Thank you

[rhysb (Rhys)]

The documentation for Templating can be found here.

Templating

HA Templating uses Jinja2, so you can find various references on the www.
https://jinja.palletsprojects.com/en/3.1.x/templates/#

It may be a bit daunting, but have a look at the examples here. I try to provide ones that have the essential components and there are many other contributors. I find a good way to learn is to create a separate dashboard where you can create cards and figure out how it all works.

[Sddawson]

I am a bit confused by the new theme situation. For instance, do the Mushroom cards now respond to those new variables as well as the original mush-rgb ones (so I could use the “mush” ones to apply only to the Mushroom cards)? If I have used mush-rgb in my own theme, do I now have to change it to --rgb ones? And do all the other Mushroom variables still work in my own theme? And should I now remove

    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px

from my own theme, because those are now the HA defaults (there being no need for a default Mushroom theme any more). So many questions! Hope you can enlighten me…

[Marauder2]

@FreakLikeMe

custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.home
        state: 'on'
    chip:
      type: entity
      entity: input_boolean.home
      content_info: name

If I’m understanding correctly, your chip is conditional and only shows up if the input_boolean.home is on, but in your screenshot the chip shows Away, how does that work?

[drpau]

Is anyone aware of how to add an icon, inline of a title.

For example, i have a title called “Harper’s Bedroom”

I would like to have the icon of the bunny beside it (similar to the megaphone in the link here - where the questions has been asked before) .

type: custom:mushroom-title-card
title: ''
subtitle: Harpers Room {{icon:'mdi:rabbit-variant-outline'}}

doesn’t work and similar variants seem not to work too

[Tyfoon]

Thanks Rhys! This fixed it. Almost feel ashamed that I did not know the template sensor existed.

[rhysb (Rhys)]

You can’t use an mdi icon in the Mushroom Title card, but you can use emoji.

type: custom:mushroom-title-card
subtitle: Harper's Room 🐇

🐇 Rabbit Emoji

[rhysb (Rhys)]

No the Mushroom cards do not use the new variables yet. The --mush-rgb-<color> variables are used to override the default Mushroom colors but by defining them in your theme it allows you to use them in other cards. With the new --rgb-<color>-color variables we no longer need to do that. You can continue to use --mush-rgb-<color> or change to --rgb-<color>-color.

The Mushroom cards will work without any theme file, but if you want to change the defaults you can.