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

[vglzng]

Hi, I’m absolutely loving the contributions over here. Learning a lot, thanks for that.
Still having a problem though, i’m trying to let a chip light card pulse with a box shadow, but the background color of the icon is not transparant, so there is a “black square” in the box shadow. Is there any way to set the background color of the icon to transparant? What i have so far:

    mushroom-template-chip:nth-child(3)$: |
      ha-icon {
        {{ 'animation: Pulse 3s ease-out infinite;' if is_state ('light.alle_lampen', 'on')}}
      }
      @keyframes Pulse {
        50% {
          box-shadow: 0 0 10px yellow; 
        }
      }

Here is the result:

[reesion (Reesion Tee)]

Hi,

Care to share you codes that shows the number of entities opened/on for your Door and Lamp?

[MrPresident (Tom)]

Hey guys,
I’m trying to use the stack-in-card and I’m having a hard time understanding how.
I’m trying to do this:

type: custom:stack-in-card
mode: vertical
keep:
  margin: false
  box_shadow: false
  background: false
cards:
  - type: custom:mushroom-person-card
    entity: person.tomer_nassi
    layout: vertical
    icon_type: entity-picture
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.pixel_5_battery_level
      - type: entity
        entity: sensor.pixel_5_charger_type
    alignment: center

how do I get rid of the line in the middle?

[Mariusthvdb (Marius)]

just to tidy up your cards…
takes out the ugly box-shadow too on the camera:

    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-template-card
          entity: weather.buienradar
          icon: mdi:help
          icon_color: '#03A9F4'
          layout: vertical
          primary: '{{ state_attr(entity, "temperature") }} °C'
          secondary: '{{ state_attr(entity, "humidity") }} %'
          tap_action:
            action: navigate
            navigation_path: buiten
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  --shape-color: none;
                }
              .: |
                mushroom-shape-icon {
                  display: flex;
                  {% set weer_type = states('weather.buienradar') %}
                  {% if weer_type == 'cloudy' %}
                    --card-mod-icon: mdi:weather-cloudy;
                    animation: cloudy 10s ease-in-out infinite;
                  {% elif weer_type == 'exceptional' %}
                    --card-mod-icon: mdi:alert-outline;
                    animation: cloudy 10s ease-in-out infinite;
                  {% elif weer_type == 'fog' %}
                    --card-mod-icon: mdi:weather-fog;
                    animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
                  {% elif weer_type == 'hail' %}
                    --card-mod-icon: mdi:weather-hail;
                    animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
                  {% elif weer_type == 'lightning' %}
                    --card-mod-icon: mdi:weather-lightning;
                    animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
                  {% elif weer_type == 'lightning_rainy' %}
                    --card-mod-icon: mdi:weather-lightning-rainy;
                    animation: cloudy 10s ease-in-out infinite;
                  {% elif weer_type == 'partlycloudy' %}
                    {% if states['sun.sun'].state == 'below_horizon' %}
                      --card-mod-icon: mdi:weather-night-partly-cloudy;
                      animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                    {% else %}
                      --card-mod-icon: mdi:weather-partly-cloudy;
                      animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
                    {% endif %}
                  {% elif weer_type == 'pouring' %}
                    --card-mod-icon: mdi:weather-pouring;
                    animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
                  {% elif weer_type == 'rainy' %}
                    --card-mod-icon: mdi:weather-rainy;
                    animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
                  {% elif weer_type == 'snowy' %}
                    --card-mod-icon: mdi:weather-snowy;
                    animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
                  {% elif weer_type == 'snowy_rainy' %}
                    --card-mod-icon: mdi:weather-snowy-rainy;
                    animation: cloudy 10s ease-in-out infinite;
                  {% elif weer_type == 'sunny' %}
                    {% if states['sun.sun'].state == 'below_horizon' %}
                      --card-mod-icon: mdi:weather-night;
                      animation: moon 10s linear infinite, stars 5s linear infinite;
                    {% else %}
                      --card-mod-icon: mdi:weather-sunny;
                      animation: sunny 8s ease-in-out infinite alternate;
                    {% endif %}
                  {% elif weer_type == 'windy' %}
                    --card-mod-icon: mdi:weather-windy;
                    animation: cloudy 10s ease-in-out infinite;
                  {% elif weer_type == 'windy_variant' %}
                    --card-mod-icon: mdi:weather-windy-variant;
                    animation: cloudy 10s ease-in-out infinite, wind 5s infinite;
                  {% else %}
                    --card-mod-icon: mdi:help;
                  {% endif %}
                }
                @keyframes sunny {
                  70% { transform: rotate(360deg) scale(1); }
                  80% { transform: scale(1); }
                  90% { transform: scale(1.15); }
                  100% { transform: scale(1); }
                }
                @keyframes cloudy {
                  0%, 100% { transform: translateX(3px); }
                  30% { transform: translateX(-1px); }
                  45% { transform: translateX(1.5px); }
                  75% { transform: translateX(-3.2px); }
                }
                @keyframes rain {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
                }
                @keyframes pouring {
                  0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
                }
                @keyframes lightning {
                  10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
                  10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
                }
                @keyframes moon {
                  0%, 100% { transform: rotate(12deg); }
                  30% { transform: rotate(-6deg); }
                  45% { transform: rotate(8deg); }
                  75% { transform: rotate(-10deg); }
                }
                @keyframes stars {
                  0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
                  3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
                  14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
                }
                @keyframes wind {
                  0%, 50%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: inset(0 0 37% 0); }
                }
                @keyframes snow {
                  50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
                  51% { clip-path: inset(0 0 0 0); }
                }
                @keyframes hail {
                  0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
                  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
                }
                @keyframes fog {
                  0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
                  25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
                  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
                }
                @keyframes sun {
                  50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
                }
                :host {
                  --mush-icon-size: 90px;
                  --mush-card-primary-font-size: 22px;
                  --mush-card-primary-font-weight: normal;
                  --mush-card-secondary-font-size: 16px;
                  --mush-card-secondary-font-weight: normal;
                }
        - type: picture-entity
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

I was a bit surprised we can not do:

          icon_color: >
            {{states('sensor.temperature_color_name')}}

since I have that in my system and returns a nice color_name:

      - unique_id: temperature_color_name
        state: >
          {% set temp = states('sensor.dark_sky_temperature')|float(0) %}
          {% if temp < -20 %} black
          {% elif temp < -15 %} navy
          {% elif temp < -10 %} darkblue
          {% elif temp < -5 %} mediumblue
          {% elif temp < 0 %} blue
          {% elif temp < 5 %} dodgerblue
          {% elif temp < 10 %} lightblue
          {% elif temp < 15 %} turquoise
          {% elif temp < 20 %} lightgreen
          {% elif temp < 25 %} darkgreen
          {% elif temp < 30 %} orange
          {% elif temp < 35 %} crimson
          {% else %} firebrick
          {% endif %}

might be the color_names not being supported by the mushroom?

[0tto0o]

I thought about that too, but the problem is that when I remove the stack-in-card on mobile the bottom of the map is cut off:

[denozord]

Hello.
Help me please. How to make a round Mushroom button square like a media card?

Thanks!

[Mariusthvdb (Marius)]

I see yes, happening here too…
sorry bout the, I didn’t check mobile.

those cam views have different dimension than the mushroom card so neet to be set somehow.

It was just that you had such an overload of nested cards, my fingers started to itch

still believe it must be doable in a more efficient way, but must play around bit for that.

you can see on a double cam stack, there is no such issue at all, so maybe it might even be the mushroom card that needs to be resized…

    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: picture-entity
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto
        - type: picture-entity
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

–

yep, its the card_mod on the mushroom that frustrates the stack:

need to play around there, and not have those stylings break out the card.
somehow, I feel custom:button-card would be a better option for the both of them, since we can set:

        - type: custom:button-card
          aspect_ratio: 1/1```

on those and be done with it....
anyways.

[sexelevatormusik]

What would be really great would be a Mushroom LED Strip card

Personally I think the current mushroom light card would work perfectly for this if they simply added an effects control.

[alpacalypse]

Here’s an interesting one… I have a media section in my dashboard. The console is actually a switch, not a media player. Is there a way to fake the appearance of a media card, so it can have the power button at the bottom (for visual consistency)?

I only need this for when the console is off, as the card swaps for an actual media player when on:

My reasoning for this method: the console isn’t a media player, but it’s plugged in through a smart switch. It is a bluetooth speaker, so when it’s on it’s connected to a media player I can control. I display the controls for the media player when the console is on. I can’t turn it on via the media player, so when the console is off, I display the switch instead.

[Diegoale2000 (Diego Alegre)]

A bit off topic, but any way to reference the blurred BG in that media player as the current view’s background?

[gatd4]

could someone please tell me how I code Mushroom-title-card
tap action?
thanks

[benchr]

You should be able to find it in the card editor. Look for tap action

[maniac365]

Hi, the seek bar only appears when music is paused, it disappears when music is playing, and the color is grey always.

[Banditt]

The way I have it is to use chips for the effect, color palette, intensity and speed. If you click them it opens to the more-info for each to change. If you don’t like having the history of the more-info dialog, you could also use browser-mod to have it open a popup to change each one when you click the chip, or put all four in the same popup and have every chip open the same popup for all four items.

I also hide the chips depending on what is chose (effect=solid means no palette, speed, intesity) etc.

It would be great to be able to have the select list in the card, but I haven’t figure out a good way yet because of what you were saying with it getting cut off. This is the best I have come up with.

[Tyfoon]

Nice! Could you post code please?

[sexelevatormusik]

That looks great! Could you please share the code? I’m still not that well versed in lovelace yet as most of my devices are controlled by automations or voice if necessary so I wouldn’t know how to recreate it.

[Banditt]

Here is the post on how to do the second light color on the WLED and has the example card code.

Controlling WLED Secondary Color

Since most of the effects of WLED involve a secondary color and I couldn’t seem to figure out through the WLED integration how to control I tried and make a way to do and it works. You can use the built in color picker. Example card using Mushroom: [image] Disclaimer: There is probably already a great way to do this, but I couldn’t find one by searching I am still learning Home Assistant so there is probably a way better way to code this than what I did. If you have any suggestions or edits…

To add in the chips for the effect, palette, speed and intensity:

Light Effect Chips

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
    chip:
      type: entity
      entity: select.example_select_wled_effect
      icon: mdi:led-on
      content_info: state
      name: Effect
      icon_color: grey
      card_mod:
        style: |
          ha-card {
            top: 2px;   
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
          }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Solid
        target:
          entity_id: select.example_select_wled_effect
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: unknown
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: select.example_select_wled_effect
        state_not: Flow Stripe
      - entity: select.example_select_wled_effect
        state_not: Solid Glitter
      - entity: select.example_select_wled_effect
        state_not: Solid Pattern Tri
      - entity: select.example_select_wled_effect
        state_not: Stream 2
    chip:
      type: entity
      entity: select.wled_color_palette
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      hold_action:
        action: call-service
        service: select.select_option
        data:
          option: Default
        target:
          entity_id: select.wled_color_palette
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_intensity
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_intensity') | int /255 *100) | round(0)  }}%
      icon: mdi:chart-line-variant
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
  - type: conditional
    conditions:
      - entity: select.example_select_wled_effect
        state_not: Solid
      - entity: light.wled
        state: 'on'
    chip:
      type: template
      entity: number.wled_speed
      icon_color: grey
      card_mod: null
      style: |-
        ha-card {
            top: 2px;
            border: 0px;
            --text-color: rgb(var(--rgb-grey));
            background-color: rgba(var(--rgb-disabled),0.10) !important;
            }
      content: |
        {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
      icon: mdi:speedometer
      double_tap_action:
        action: more-info
      tap_action:
        action: more-info
      hold_action:
        action: more-info
alignment: start
card_mod:
  style: |
    ha-card {
      margin: 0px 8px 8px;
      --chip-height: 32px;
      --chip-padding: 12px;
      --chip-spacing: 12px;
    }

Here is the complete card:

Complete Card

type: custom:vertical-stack-in-card
cards:
  - type: custom:mushroom-light-card
    entity: light.wled
    show_brightness_control: true
    show_color_control: false
    use_light_color: true
    layout: horizontal
    name: WLED Strip
    show_color_temp_control: false
    fill_container: true
    primary_info: name
    collapsible_controls: true
    icon: mdi:led-strip-variant
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
            chip:
              type: entity
              entity: select.example_select_wled_effect
              icon: mdi:led-on
              content_info: state
              name: Effect
              icon_color: grey
              card_mod:
                style: |
                  ha-card {
                    top: 2px;   
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                  }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Solid
                target:
                  entity_id: select.example_select_wled_effect
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: unknown
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: select.example_select_wled_effect
                state_not: Flow Stripe
              - entity: select.example_select_wled_effect
                state_not: Solid Glitter
              - entity: select.example_select_wled_effect
                state_not: Solid Pattern Tri
              - entity: select.example_select_wled_effect
                state_not: Stream 2
            chip:
              type: entity
              entity: select.wled_color_palette
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              hold_action:
                action: call-service
                service: select.select_option
                data:
                  option: Default
                target:
                  entity_id: select.wled_color_palette
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_intensity
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: >
                {{ (states('number.wled_intensity') | int /255 *100) | round(0) 
                }}%
              icon: mdi:chart-line-variant
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
          - type: conditional
            conditions:
              - entity: select.example_select_wled_effect
                state_not: Solid
              - entity: light.wled
                state: 'on'
            chip:
              type: template
              entity: number.wled_speed
              icon_color: grey
              card_mod: null
              style: |-
                ha-card {
                    top: 2px;
                    border: 0px;
                    --text-color: rgb(var(--rgb-grey));
                    background-color: rgba(var(--rgb-disabled),0.10) !important;
                    }
              content: |
                {{ (states('number.wled_speed') | int /255 *100) | round(0)  }}%
              icon: mdi:speedometer
              double_tap_action:
                action: more-info
              tap_action:
                action: more-info
              hold_action:
                action: more-info
        alignment: start
        card_mod:
          style: |
            ha-card {
              margin: 0px 8px 8px;
              --chip-height: 32px;
              --chip-padding: 12px;
              --chip-spacing: 12px;
            }
    card_mod:
      style: |
        ha-card {
          border: 0px;
        }
  - type: conditional
    conditions:
      - entity: light.wled
        state: 'on'
    card:
      square: false
      columns: 2
      type: grid
      cards:
        - type: custom:mushroom-light-card
          entity: light.wled
          show_color_control: true
          primary_info: none
          secondary_info: none
          icon_type: none
          card_mod:
            style: |
              ha-card {
                border: 0px;
                box-shadow: none;
              }
        - type: conditional
          conditions:
            - entity: select.example_select_wled_effect
              state_not: Solid
          card:
            type: custom:mushroom-light-card
            entity: light.testlight_colortwo
            primary_info: none
            secondary_info: none
            icon_type: none
            show_color_control: true
            card_mod:
              style: |
                ha-card {
                  border: 0px;
                  box-shadow: none;
                }

[sexelevatormusik]

Thank you! That’s great but I’m not controlling LED’s. Just ordinary hue lights for which I have templated scenes as effects so I won’t be needing anything more than the standard light color picker. I am just even more unfamiliar with lovelace than you so needed to see a functioning example to modify for my purpose. That said, if, in the highly unlikely circumstance that I find a way to improve upon your code I will gladly share but you probably shouldn’t hold your breath.

[0tto0o]

I think dodgerblue is not supported, but using HEX codes it works for me:

        {% if temp < -20 %} #000000
        {% elif temp < -15 %} #000080
        {% elif temp < -10 %} #00008B
        {% elif temp < -5 %} #0000CD
        {% elif temp < 0 %} #0000FF
        {% elif temp < 5 %} #1E90FF
        {% elif temp < 10 %} #ADD8E6
        {% elif temp < 15 %} #40E0D0
        {% elif temp < 20 %} #90EE90
        {% elif temp < 25 %} #006400
        {% elif temp < 30 %} #FFA500
        {% elif temp < 35 %} #DC143C
        {% else %} #B22222
        {% endif %}

[Mariusthvdb (Marius)]

a yes, thats clever

thing is, I always want to use the universal 140 html color names, to make my themes easily editable. Why have these universal supported names, and not support them… a pity really because it would make life so much easier on us tinkerers.

but, given that limitation, your solution fits the bill!

btw, as some extra inspiration for that left button, I’ve been using this for ages now, as in, far before the conception of Mushroom

type: custom:button-card
template:
  - styles_name
  - styles_cf_notification
show_entity_picture: true
size: 100%
aspect_ratio: 1/1
show_icon: false
entity: sensor.weather_animated_icon
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: /ui-overzicht/weer
custom_fields:
  notification: >
    [[[ return Math.round(states['sensor.temp_current'].state); ]]]

styles:
  name:
    - color: var(--primary-color)
#  card:
#    - background-color: var(--card-background-color)
  custom_fields:
    notification:
      - background-color: >
          [[[ return states['sensor.temperature_color_name'].state; ]]]
      - color: ivory