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

Thanks. It is just a simple box-shadow effect used with if statement.

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px; 

When the light is “on” stacking shapes appear. When it is “off” it will display like this:

image

There are many examples of box shadows on the net, like this one:

You can also try “Box Shadow Generators”

1 Like

sigh - yes. Ugly behavior.

This did work, FWIW, which gets me a little closer (thanks!).

square: false
type: grid
cards:
  - type: custom:mushroom-entity-card
    entity: sensor.ecowitttempsensor1
    name: sensor1
    layout: vertical
    icon: mdi:thermometer
    frontend: null
    card_mod: &teststyle
      style: |
        ha-card {
          {% set x = states(config.entity) | int %}   
          --primary-text-color:
            {% if x >= 75 %}   white;
            {% else %}        yellow;
            {% endif %}
          --secondary-text-color:
            {% if x >= 80 %}    white;
            {% else %}         cyan;
            {% endif %}
          background:
            {% if x >= 90 %}    red
            {% elif x >= 80 %}   orange
            {% elif x >= 70 %}   green
            {% elif x >= 50 %}   cyan
            {% else %}          blue
            {% endif %}
        }
  - type: custom:mushroom-entity-card
    entity: sensor.ecowitttempsensor2
    name: sensor2
    layout: vertical
    icon: mdi:thermometer
    frontend: null
    card_mod:
      <<: *teststyle
columns: 5

Happy to help! Still think auto entities is your best bet in these situations. It can create many of the same type of card but inject different entities and names into them either using a regular filter (visual editor) or via a template filter so something like the below as an example.

              type: custom:auto-entities
              card:
                type: custom:bar-card
                card_mod:
                  style: |
                    bar-card-currentbar, bar-card-backgroundbar {
                      border-radius: 19px;
                    }
              filter:
                template: |-
                  {% for state in states.sensor -%}
                    {%- if state.entity_id | regex_match("sensor.*battery*", ignorecase=False) and "SM" not in state.attributes.friendly_name and "Dimitri" not in state.attributes.friendly_name and 'unknown' not in state.state and 'unavailable' not in state.state and state.state | int <= 10-%}
                      {{
                        {
                          'entity': state.entity_id,
                          'name': state.attributes.friendly_name.split(' battery')[0]
                        }
                      }},
                    {%- endif -%}
                  {%- endfor %}
              sort:
                method: state
                numeric: true

THANK YOU so much! I will definitely look into this!

1 Like

My current fan speed setup is messy, is there card/code available to have 1 icon/card with selects a certain fan speed. (I have 5 speeds based on xx % send)

1 Like

Check this out 🔹 Card-mod - Add css styles to any lovelace card - #4973 by eMeF?

You can combine that with mushroom-fan-card into single card using custom-stacked-card.

You can achieve something like this

3 Likes

Hi guys, quick question:

How can I change the icon color in a cove card please?
I am using styles to change the background color of the card but can’t figure out how to change that icon color!

thank you so much :slight_smile:

Please post your current YAML so we can help you :slight_smile:

I was trying this:

type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
  action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
icon-color: grey
card_mod:
  style: |
    ha-card {
      --primary-text-color: rgb(54,57,59);
      --primary-icon-color: rgb(255,148,9);
    }

The font color works, but the icon color doesn’t.
I am sure I am doing something wrong here!

No, nothing wrong just add this:

type: custom:mushroom-cover-card
entity: cover.voletsmaison
tap_action:
  action: more-info
show_position_control: false
show_buttons_control: true
fill_container: false
layout: horizontal
name: m a i s o n
secondary_info: none
card_mod:
  style: |
    ha-card {
      --primary-text-color: rgb(54,57,59);
      --primary-icon-color: rgb(255,148,9);
    }
    mushroom-shape-icon {
      --shape-color: rgba(255, 0, 0, 0.2) !important;
      --icon-color: rgba(255, 0, 0, 1) !important;
    }

of course change the color to whatever you want to use :slight_smile:

2 Likes

thanks mate, works like a charm

May I ask another question:
Is there anyway to change the font type?

Yes! Check out my guide here:

easier than telling you every option :slight_smile:

1 Like

fantastic, sorry I missed that!

1 Like

Agree - after a bit of fiddling I came up with this for lights. This’ll come in quite handy with the lot of door/window sensors I need to define in the dashboard. Thanks !!!

card:
  square: false
  type: grid
  columns: 3
card_param: cards
filter:
  include:
    - domain: light
      state: //
      name: //
      options:
        type: custom:mushroom-light-card
        vertical: true
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
        card_mod: null
        style: |
          ha-card {
            {% set x = states(config.entity) %}
            --primary-text-color:
            {% if x == "on" %} black ;
            {% else %}         red;
            {% endif %}
            --secondary-text-color:
            {% if x == "on" %} blue ;
            {% else %}         magenta;
            {% endif %}
            background:
               {% if x == "on" %}
               lightgreen
               {% elif x == "off" %}
               white
               {% else %}
               lightgrey
               {% endif %}
           }

1 Like

With massive help on that forum, I played with my fan cards and ended up with the following.

On the main dashboard screen, I have a simple fan card with a couple of presets and a gear icon that takes me to the detailed settings screen. There I can control not only the fan but also the associated automation and their thresholds.

The cards also have an animated glow effect around the icon to indicate if the automation is on and a double tab action to toggle it on/off.

Simple view
image

image

Code
type: custom:stack-in-card
cards:
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    name: Cooling Fan
    icon_animation: true
    show_percentage_control: true
    collapsible_controls: true
    tap_action:
      action: call-service
      service: script.fan_on_off_with_automation
    hold_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    double_tap_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    card_mod:
      style:
        mushroom-shape-icon$: |
          {% if is_state('input_boolean.auto_fan', 'on') %}
          .shape {
            --shape-animation: ping 5s infinite;
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            
            100% {
              box-shadow: 0 0 5px 5px transparent;
            }
          }
          {% elif is_state('input_boolean.auto_fan', 'off') %}
          {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: scene.fan_15
        icon_color: null
        icon: mdi:fan-speed-2
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_15
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: scene.fan_20
        icon_color: null
        icon: mdi:fan-speed-3
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_20
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
      - type: entity
        entity: fan.whisper_flex
        icon_color: blue
        icon: mdi:cog
        content_info: none
        tap_action:
          action: navigate
          navigation_path: /dashboard-mushroom/fan
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-purple' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }

Detailed view

image

image

Code
type: custom:stack-in-card
cards:
#Main fan card
  - type: custom:mushroom-fan-card
    entity: fan.whisper_flex
    icon_animation: true
    show_percentage_control: true
    collapsible_controls: false
    tap_action:
      action: call-service
      service: script.fan_on_off_with_automation
    hold_action:
      action: navigate
      navigation_path: /dashboard-mushroom/fan
    card_mod:
      style:
        mushroom-shape-icon$: |
          {% if is_state('input_boolean.auto_fan', 'on') %}
          .shape {
            --shape-animation: ping 5s infinite;
          }
          @keyframes ping {
            0% {
              box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
            }
            
            100% {
              box-shadow: 0 0 5px 5px transparent;
            }
          }
          {% elif is_state('input_boolean.auto_fan', 'off') %}
          {% endif %}
#Chips with presets
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: scene.fan_15
        icon_color: null
        icon: mdi:fan-speed-2
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_15
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-red' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            } 
      - type: entity
        entity: scene.fan_20
        icon_color: null
        icon: mdi:fan-speed-3
        content_info: none
        tap_action:
          action: call-service
          service: script.fan_20
        card_mod:
          style: |
            ha-card {
              --chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-disabled' }}), 0.2);
              --icon-color: rgb(var(--rgb-disabled));
            }
    card_mod:
      style: |
        ha-card {
            --chip-box-shadow: none;
            margin: 0px 12px 0px;
            top: 16px;
            width: -webkit-fill-available;
            right: 12px;
            position: absolute;
        } 
        .chip-container {
            right: 0px;
            position: absolute;
        }
#Header for Mode control
  - type: custom:mushroom-title-card
    subtitle: Mode
    card_mod:
      style: |
        ha-card {
          margin: -12px 0px 0px;
        }
#Mode control
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: nature
              target:
                entity_id: fan.whisper_flex
            icon: mdi:forest
            content: Nature
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','nature') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','nature') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: sleep
              target:
                entity_id: fan.whisper_flex
            icon: mdi:power-sleep
            content: Sleep
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','sleep') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: fan.whisper_flex
            tap_action:
              action: call-service
              service: fan.set_preset_mode
              data:
                preset_mode: smart
              target:
                entity_id: fan.whisper_flex
            icon: mdi:fan
            content: Smart
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: -15px 12px 0px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }
#Header for Oscillation control
  - type: custom:mushroom-title-card
    subtitle: Oscillation and Timer
    card_mod:
      style: |
        ha-card {
          margin: 0px 0px 0px;
        }
#Oscillation control
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: switch.whisper_flex_horizontal_oscilation
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.whisper_flex_horizontal_oscilation
            icon: mdi:pan-horizontal
            content: Horizontal
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_horizontal_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state('switch.whisper_flex_horizontal_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: switch.whisper_flex_vertical_oscilation
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.whisper_flex_vertical_oscilation
            icon: mdi:pan-vertical
            content: Vertical
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state('switch.whisper_flex_vertical_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state('switch.whisper_flex_vertical_oscilation','on') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
          - type: template
            entity: select.whisper_flex_countdown
            tap_action:
              action: more-info
            icon: mdi:timer-sand-complete
            content: '{{states(''select.whisper_flex_countdown'') }} hours'
            card_mod:
              style: |
                ha-card {
                  justify-content: center;
                  {% if is_state('fan.whisper_flex', 'off') and is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-disabled), 0.7);
                  {% elif is_state_attr('fan.whisper_flex','preset_mode','smart') %}
                    --chip-background: rgba(var(--rgb-green), 0.7);
                  {% else %}
                    --chip-background: inherit;  # set it to the default or whatever color you want
                  {% endif %}
                }
        alignment: Center
        card_mod:
          style: |
            mushroom-template-chip {
              width: 100%; 
            }
            div.chip-container {
              justify-content: space-evenly;
              flex-wrap: nowrap;
            }

            ha-card {
              margin: -15px 12px 12px;
              --chip-background: rgba(var(--rgb-disabled), 0.15);
              --chip-box-shadow: none;
              --chip-border-radius: 10px;
              --chip-height: 42px;
              --chip-padding:10px;
            }

I had some trouble modifying the spacing before and after the title card but I somehow managed although it is probably not the cleanest approach

ha-card {
              margin: -15px 12px 12px;
17 Likes

Please can someone help, I am trying to stop popups on my phone from taking the full screen, I have created this very small test popup and it works fine on my desktop but when opened on my phone its still full screen;

desktop:

phone:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Test Popup
    style: |
      --popup-min-width: 200px;
      --popup-max-width: 290px;
      --popup-border-width: var(--ha-card-border-width, 2px);
      --popup-border-color: var(--ha-card-border-color, var(--divider-color, #eee));
      --popup-border-radius: 28px;
      --popup-background-color: var(--ha-card-background, var(--card-background-color, white));
      --popup-padding-x: 0px;
      --popup-padding-y: 0px;
    content:
        type: entity
        entity: binary_sensor.garage_door

Hoping someone can help me with this one… I’m trying to call the service input_select.select_option while using jinja2 in the option field.

The following code is working perfectly in the dev tools

service: input_select.select_option
target:
  entity_id: input_select.home_mode      
data:
  option: |
    {{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}

But for some reason it doesn’t work inside the mushroom template card

  - type: template
    icon: mdi:walk
    content: '{{ states(''input_select.home_mode'') }}'
    tap_action:
      action: call-service
      service: input_select.select_option
      target:
        entity_id: input_select.home_mode
      data:
        option: |
          {{'Thuis' if states('input_select.home_mode') == 'Hold' else 'Hold'}}

When I press the card it gives me an error

This is not the right place to ask this question. Take it to the browser mod page. This question has nothing to do with mushroom cards.

FYI its a known bug if you looked at just a few recent posts on the right page.

Hello everyone, tell me, maybe someone has examples of flower cards.

Sorry for a delayed reply. I am posting my code below for this card. However, I feel that if you change the setting of your theme to Mushroom Shadow on the viewing device, your line problem may go away.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-template-card
    primary: Kitchen
    secondary: 🌡{{ states('sensor.kitchen_temperature') }}°C
    icon: mdi:countertop
    icon_color: |-
      {% set state=states('light.kitchen_cabinet_lights') %}
      {% if state=='on' %}
      green
      {% elif state=='off' %}
      grey
      {% else %}
      grey
      {% endif %}
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: navigate
      navigation_path: /dashboard-cards/kitchen
    hold_action:
      action: none
    double_tap_action:
      action: none
    style: |
      :host([dark-mode]) {
        background: rgba(var(--rgb-primary-background-color), 0.2);
      } 
      :host {
        background: rgba(var(--rgb-primary-text-color), 0.025);
      } 
  - type: custom:mushroom-chips-card
    style: |
      ha-card {
        --chip-box-shadow: none;
        --chip-background: none;
        --chip-spacing: 0;
      }
    alignment: end
    chips:
      - type: conditional
        conditions:
          - entity: light.kitchen_cabinet_lights
            state: 'on'
        chip:
          type: entity
          entity: light.kitchen_cabinet_lights
          icon_color: amber
          tap_action:
            action: call-service
            service: light.turn_off
            service_data: {}
            target:
              entity_id: light.kitchen_cabinet_lights
          content_info: none
          icon: mdi:lightbulb
      - type: conditional
        conditions:
          - entity: switch.fridge
            state: 'on'
        chip:
          type: entity
          entity: switch.fridge
          icon_color: red
          tap_action:
            action: call-service
            service: switch.turn_off
            service_data: {}
            target:
              entity_id: switch.fridge
          content_info: none
          icon: mdi:fridge-variant
      - type: conditional
        conditions:
          - entity: switch.deep_freezer
            state: 'on'
        chip:
          type: entity
          entity: switch.deep_freezer
          icon_color: deep-purple
          tap_action:
            action: call-service
            service: switch.turn_off
            service_data: {}
            target:
              entity_id: switch.deep_freezer
          content_info: none
          icon: mdi:treasure-chest
      - type: conditional
        conditions:
          - entity: fan.kitchen_exhaust_fan
            state: 'on'
        chip:
          type: entity
          entity: fan.kitchen_exhaust_fan
          icon_color: green
          card_mod: null
          style: |
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            ha-card {
              animation: rotation linear infinite;
              {% if states('fan.kitchen_exhaust_fan') == 'on' %}
               animation-duration: 1s;
              {%- else -%}
              {%- endif %}
            }
          tap_action:
            action: call-service
            service: fan.turn_off
            service_data: {}
            target:
              entity_id: fan.kitchen_exhaust_fan
          content_info: none
          icon: mdi:fan
style: |
  ha-card {
    height: 100px;
    {% if is_state('light.kitchen_cabinet_lights', 'on') %}
       background: rgba(255, 152, 0, 0.1);
    {% endif %}
  }
view_layout:
  grid-area: cen4
card_mod:
  style: |
    ha-card {
      background: none !important;
      {% if states('light.kitchen_cabinet_lights') == 'on' %}
      box-shadow: 0px 0px 5px 5px #56DD3F !important;
      {% else %}    
      {% endif %}
    }

1 Like