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

@rhysb can you plz help me with my query ?

@HelL5toKe These are super nice! Would you mind sharing your sensor templates? It seems you’re using a bunch of them for conditions and badge displays. I’m particularly interested in the number of lights on sensor — how do you determine this? Does it count bulbs or groups? Both? How do you exclude one or the other? Also, that Plex sensor! How did you do that? :open_mouth:

He literally shared his whole YAML in that same post lol.

Does anyone know how to capture the RGB color variable from a multi-color light strip, and pass that value through to the ping CSS animation? Basically, I have a Meross light strip that is attached to the TV. I have already got the automations to turn the light strip on and off based on the TV status, but I want to be able to change the color/see that its on. I don’t want a separate card just for this light, so I want to have it pulsing as an animation on my TV card as part of the larger stack in card.
I can get the icon to ping when the TV/light is turned on, and I can change the color of the icon/shape based on the RGB of the light, but I can’t figure out how to get the animation color to reflect what the light is.

Here is the code for just the animation as I currently have it (I know it says its currently green, but I cant figure out, aside from changing that to a different color hard coded, how to update that part.


type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:television
icon_color: cyan
picture: ''
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
  action: toggle
fill_container: true
card_mod:
  style: |
    mushroom-shape-icon {
      display: flex;
      border-radius: 60%;
      {% set status = states('light.smart_led_light_strip_msl320cp_main_channel') %}
      {% if status == 'on' %}
       animation: ping 2s linear infinite;
      {% endif %}
    }
       @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        100% {
          box-shadow: 0 0 5px 15px transparent;
      }
    }

Thanks!

1 Like

hi,
can you share which weather card you are using there ? thank you.

Hey @davidnestico, here is a collapsible version.

Mushroom Collapsible Weather Bar Card:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 66px auto 36px
      margin: '-4px -4px -12px -4px;'
    cards:
      - type: custom:mushroom-entity-card
        entity: weather.weatherflow_hourly_based_forecast
        icon_color: blue
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:hourly-weather
        entity: weather.weatherflow_hourly_based_forecast
        icons: false
        label_spacing: '2'
        num_segments: '12'
        name: ' '
        card_mod:
          style:
            weather-bar$: |
              .main {
                --mush-rgb-red: 244, 67, 54;
                --mush-rgb-pink: 233, 30, 99;
                --mush-rgb-purple: 156, 39, 176;
                --mush-rgb-deep-purple: 103, 58, 183;
                --mush-rgb-indigo: 63, 81, 181;
                --mush-rgb-blue: 33, 150, 243;
                --mush-rgb-light-blue: 3, 169, 244;
                --mush-rgb-cyan: 0, 188, 212;
                --mush-rgb-teal: 0, 150, 136;
                --mush-rgb-green: 76, 175, 80;
                --mush-rgb-light-green: 139, 195, 74;
                --mush-rgb-lime: 205, 220, 57;
                --mush-rgb-yellow: 255, 235, 59;
                --mush-rgb-amber: 255, 193, 7;
                --mush-rgb-orange: 255, 152, 0;
                --mush-rgb-deep-orange: 255, 87, 34;
                --mush-rgb-brown: 121, 85, 72;
                --mush-rgb-grey: 158, 158, 158;
                --mush-rgb-blue-grey: 96, 125, 139;
                --mush-rgb-black: 0, 0, 0;
                --mush-rgb-white: 255, 255, 255;

                --color-clear-night: rgba(var(--mush-rgb-black), 0.2) !important;
                --color-cloudy: rgba(var(--mush-rgb-grey), 0.2) !important;
                --color-fog: var(--color-cloudy);
                --color-hail: rgba(var(--mush-rgb-indigo), 0.2) !important;
                --color-lightning: var(--color-rainy);
                --color-lightning-rainy: var(--color-rainy);
                --color-partlycloudy: rgba(var(--mush-rgb-blue), 0.2) !important;
                --color-pouring: var(--color-rainy);
                --color-rainy: rgba(var(--mush-rgb-indigo), 0.2) !important;
                --color-snowy: rgba(var(--mush-rgb-white), 0.2) !important;
                --color-snowy-rainy: var(--color-partlycloudy);
                --color-sunny: rgba(var(--mush-rgb-yellow), 0.2) !important;
                --color-windy: var(--color-sunny);
                --color-windy-variant: var(--color-sunny);
                --color-exceptional: rgba(var(--mush-rgb-amber), 0.2) !important;
              }
              .bar > div {
                height: 42px !important;
              }            
              .bar > div:first-child {
                border-top-left-radius: 12px !important;
                border-bottom-left-radius: 12px !important;
              }            
              .bar > div:last-child {
                border-top-right-radius: 12px !important;
                border-bottom-right-radius: 12px !important;
              }            
              .bar > div > span {
                text-shadow: none !important;
                color: rgb(var(--primary-text-color));
                font-size: 14px;
                font-weight: bold;
              } 
              .axes > div > .bar-block-bottom > .hour {
                font-size: 12px;
                font-weight: bolder;
              }
              .axes > div > .bar-block-bottom > .temperature {
                font-size: 12px;
                font-weight: bolder;
              }
              .axes {
                margin-top: 10px !important;
              }
            .: |
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px;
                margin: -8px -4px -4px -16px;
              }
      - type: custom:mushroom-template-card
        entity: input_boolean.weather_bar_dropdown
        icon: mdi:chevron-down
        icon_color: disabled
        hold_action:
          action: none
        card_mod:
          style:
            mushroom-shape-icon:
              $: |
                .shape ha-icon {
                  transition: transform 0.14s !important;
                  {{ 'transform: rotate(-180deg);' if is_state(config.entity, 'on') }}
                }
              .: |
                ha-card {
                  align-items: flex-end;
                  box-shadow: none;
                }
                mushroom-shape-icon {
                  --shape-color: none !important;
                }
card_mod:
  style: |
    ha-card {
      {{ 'height: 66px;' if is_state('input_boolean.weather_bar_dropdown', 'off') }}
    }
16 Likes

Try something like this:

type: custom:mushroom-template-card
icon: mdi:television
icon_color: cyan
entity: light.smart_led_light_strip_msl320cp_main_channel
tap_action:
  action: toggle
fill_container: true
card_mod:
  style: |
    mushroom-shape-icon {
      display: flex;
      border-radius: 60%;
      {% set status = states(config.entity) %}
      {% if status == 'on' %}
       animation: ping 2s linear infinite;
      {% endif %}
      {% set r = state_attr(config.entity, 'rgb_color')[0] %}
      {% set g = state_attr(config.entity, 'rgb_color')[1] %}
      {% set b = state_attr(config.entity, 'rgb_color')[2] %}
    }
    @keyframes ping {
      0% { box-shadow: 0 0 5px 1px rgba( {{r}}, {{g}}, {{b}}, 0.7); }
      100% { box-shadow: 0 0 5px 15px transparent; }
    }
1 Like

LOVE it!! This is exactly what I was looking for.


3 Likes

That would require more than just CSS styling I’m afraid.

image

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    secondary: >-
      {{ states.sensor.garage_temperature.state }} °C / {{
      states.sensor.garage_humidity.state }} %
    icon: mdi:car-back
    icon_color: blue
    multiline_secondary: true
    primary: Garage
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          title: Garage
          content:
            type: custom:vertical-stack-in-card
            horizontal: false
            cards:
              - type: custom:banner-card
                heading: 🌡 Klimaat
              - type: custom:config-template-card
                entities:
                  - input_number.temperature_graph_hours
                card:
                  type: horizontal-stack
                  cards:
                    - type: custom:config-template-card
                      entities:
                        - input_number.temperature_graph_hours
                      card:
                        type: custom:mini-graph-card
                        entities:
                          - sensor.garage_temperature
                        hours_to_show: >-
                          ${states["input_number.temperature_graph_hours"].state}
                        points_per_hour: 1
                        line_width: 4
                        font_size: 70
                        line_color: lightblue
                        align_state: center
                        show:
                          name: false
                          average: true
                          extrema: true
                          labels_secondary: false
                    - type: custom:config-template-card
                      entities:
                        - input_number.temperature_graph_hours
                      card:
                        type: custom:mini-graph-card
                        entities:
                          - sensor.garage_humidity
                        hours_to_show: >-
                          ${states["input_number.temperature_graph_hours"].state}
                        points_per_hour: 1
                        line_width: 4
                        font_size: 70
                        align_state: center
                        show:
                          name: false
                          average: true
                          extrema: true
              - type: entities
                show_header_toggle: false
                entities:
                  - entity: input_number.temperature_graph_hours
                    type: custom:numberbox-card
                    icon: mdi:poll
                    unit: h
              - type: custom:banner-card
                heading: 💡 Verlichting
              - type: custom:mushroom-light-card
                entity: light.garage
                fill_container: false
                use_light_color: false
                show_brightness_control: true
                primary_info: none
                show_color_temp_control: false
                layout: horizontal
  - type: custom:mushroom-light-card
    entity: light.garage
    primary_info: none
    fill_container: true
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: false
    show_color_control: false
    layout: horizontal

3 Likes

ok… thank you for your help.

1 Like

Hi @rhysb, i guess your to-do list is hugh, did you include this also to the list?

Not per room, but whole house is done.

Mushroom low battery popup:

sensor:
  - platform: template
    sensors:
      devices_with_low_battery:
        friendly_name: 'Devices with Low Battery'
        unit_of_measurement: devices
        value_template: >-
          {% set ignore_entities = [] %}
          {{ states.sensor
            | selectattr('attributes.device_class', 'eq', 'battery')
            | rejectattr('entity_id', 'in', ignore_entities)
            | map(attribute='state')
            | reject('in', ['unknown', 'unavailable'])
            | map('int', -1) | select('le', 30)
            | select('ge', 0)
            | list | count
          }}
        icon_template: >-
          {% if is_state('sensor.devices_with_low_battery', '0') %}
            mdi:battery-check
          {% else %}
            mdi:battery-alert
          {% endif %}
type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: sensor.devices_with_low_battery
        state_not: '0'
    chip:
      type: template
      entity: sensor.devices_with_low_battery
      icon_color: red
      icon: mdi:battery-alert
      content: '{{ states(entity) }}'
      tap_action:
        action: fire-dom-event
        browser_mod:
          service: browser_mod.popup
          data:
            title: Low Batteries
            content:
              type: custom:auto-entities
              filter:
                include:
                  - attributes:
                      device_class: battery
                    state: < 30
                    options:
                      type: custom:mushroom-template-card
                      primary: '{{ states(entity) }}%'
                      secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
                      icon: >
                        {% set battery_level = (states(entity) | int / 10) |
                        round(0) | int * 10 %} {% if battery_level == 100 %}
                          mdi:battery
                        {% elif battery_level > 0 %}
                          mdi:battery-{{ battery_level }}
                        {% else %}
                          mdi:battery-outline
                        {% endif %}
                      icon_color: |-
                        {% set battery_level = states(entity) | int %}
                        {% if battery_level > 90 %} 
                          green
                        {% elif battery_level > 60 %}
                          light-green
                        {% elif battery_level > 50 %}
                          lime
                        {% elif battery_level > 40 %}
                          yellow
                        {% elif battery_level > 30 %}
                          amber
                        {% elif battery_level > 20 %}
                          orange
                        {% elif battery_level > 10 %}
                          deep-orange
                        {% else %}
                          red
                        {% endif %} 
                      layout: horizontal
                      tap_action:
                        action: none
                      badge_icon: |-
                        {% set battery_level = states(entity) | int %}
                        {% if battery_level < 10 %} 
                          mdi:exclamation-thick
                        {% endif %}
                      badge_color: red
                      card_mod:
                        style: |
                          ha-card {
                            padding: 4px 12px !important;
                          }
                exclude: null
              show_empty: false
              card:
                type: custom:layout-card
                cards: []
                layout_type: masonry
              sort:
                method: friendly_name
37 Likes

Can i assume that you have the same kind for open window/doors and ligths on?

cool, is it ant other sources for working icons like that?

Hi,

first of all I am really impressed by this thread!
Until now I am only a “reader” of this channel and already found very helpful ideas for my HA dashboard.

Now I would like to modify the Mushroom Alarm Card with different icons and color code.
I already tried a lot with Card Mod but I don’t come to the preferred solution.

  1. The main icon (Mushroom State Icon?) shall be changed according to alarm status (with different icons)
  2. The icons for the 5 mushroom buttons (all alarm states are visible) shall be changed
  3. The color code shall be changed according to alarm status
  4. The size of each of the mushroom button icons shall be increased

The main question: How do I modify the Mushroom State Icon and the Mushroom Button Icons at the same time? I only managed to modify one of both.

Here is my current code that does not work properly:

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmsystem
states:
  - armed_home
  - armed_away
  - armed_night
  - armed_vacation
  - armed_custom_bypass
layout: vertical
card_mod:
  style:
    mushroom-button:nth-child(5)$: |
      ha-icon {
        --card-mod-icon: mdi:shield-account-outline;
      }
    .: |
      mushroom-shape-icon {
        {% if states(config.entity) == "disarmed" %}
          --card-mod-icon: mdi:shield-off;
        {% elif states(config.entity) == "armed_away" %}
          --card-mod-icon: mdi:shield-home;
        {% elif states(config.entity) == "armed_home" %}
          --card-mod-icon: mdi:shield-lock;
        {% elif states(config.entity) == "armed_night" %}
          --card-mod-icon: mdi:shield-moon;
        {% elif states(config.entity) == "armed_vacation" %}
          --card-mod-icon: mdi:shield-airplane;
        {% elif states(config.entity) == "armed_custom_bypass" %}
          --card-mod-icon: mdi:shield-account;
        {% elif states(config.entity) == "triggered" %}
          --card-mod-icon: mdi:shield-alert;
        {% endif %}
      }

Thank you very much in advance!

1 Like

That looks awesome. Do i add the sensor to my configuration.yaml or how does it exactly work? Thanks for all your help here :grinning_face_with_smiling_eyes:

1 Like

Is there a way to use mdi icons from this site? tried playing around with it but cant get it to work. That would be aweseome since u can configure the icons directly on the page.

Example;
https://icon-sets.iconify.design/mdi/robot-vacuum/

Yes, add the sensor to your configuration.yaml.