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

Love the cards but would like pointers on getting a mushroom style gauge card?

I’ve set up recurring reminders which I’d like to display as horizontal bar type gauges to track percentage of remaining time.

Also in progress of building water softener salt level sensor which id like to track percentage with a horizontal bar gauge too.

I see the fan and lights have a horizontal bar gauge but cannot use sensor entities with these?

Ah thank you so I need to install card mod to do this?

Also, is there anyone to change the colour depending on state for when something is playing and when it’s idle? I worked out how to do this using other template cards but how would it work using card mod?

Thanks again

This is awesome. Could we customize it so instead of the icon, we can display the current/preset temperature (via a template)? Also, would be cool if we could show the climate presets as buttons.

It’s “Offices” not “Office’s”
(gratuitous apostrophe police - moi?)

Nice dashboard. Thanks for the github link. Many good examples in there.

2 Likes

you can help? the files that you uploaded to github in which path do I have to copy them

Yes, the first method requires card_mod. Adding the variable to your theme does not.

You can change the Mushroom Media Player icon and it’s color based on the media type like this:

type: custom:mushroom-media-player-card
entity: media_player.currently_playing
volume_controls:
  - volume_set
media_controls:
  - next
  - previous
  - play_pause_stop
use_media_info: true
collapsible_controls: false
card_mod:
  style: |
    ha-card {
      {% set media_type = state_attr(config.entity,
      'media_content_type') %}
      --rgb-state-media-player:
      {% if media_type == 'tvshow' %}
        var(--rgb-blue)
      {% elif media_type == 'movie' %}
        var(--rgb-green)
      {% elif media_type == 'music' %}
        var(--rgb-red)
      {% elif media_type == 'playlist' %}
        var(--rgb-light-blue)
      {% else %}
        var(--rgb-amber)
      {% endif %};
    }
    mushroom-shape-icon {
      --card-mod-icon: 
      {% if media_type == 'tvshow' %}
        mdi:television-classic
      {% elif media_type == 'movie' %}
        mdi:movie-open
      {% elif media_type == 'music' %}
        mdi:music
      {% elif media_type == 'playlist' %}
        mdi:music
      {% else %}
        mdi:plex
      {% endif %};   
    }
5 Likes

Hey! Great job. Could you share how to make the pop-uo as you show on second image?
Thank you

It is a hacs add on called browser mode.

You can find it on here :

and here is the code :

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:stack-in-card
    cards:
      - type: vertical-stack
        cards:
          - type: picture-entity
            show_name: false
            show_state: false
            camera_view: auto
            entity: light.duvar_sag
            image: /local/png2/hue3.png
            tap_action:
              action: toggle
            double_tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.browser_mode_pop_up_close
          - type: custom:mushroom-template-card
            primary: Hue Sağ
            entity: light.duvar_sag
            secondary: Salon
            picture: /local/png/colorbulb15.png
            tap_action:
              action: toggle
            card_mod:
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0.2);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  --mush-icon-size: 43px;
                  height: 66px;
                  margin-left: -5px !important;
                }
                ha-card {
                  padding: 1px;
                  background: rgba(var(--rgb-primary-background-color), 0.1);
                    }     
          - type: custom:light-entity-card
            shorten_cards: false
            consolidate_entities: true
            child_card: false
            hide_header: true
            header: ''
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: true
            show_slider_percent: true
            full_width_sliders: false
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            entity: light.duvar_sag
            effects_list: false
            card_mod:
              style: |
                ha-card {
                  padding: -15px;
                  background: rgba(var(--rgb-primary-background-color), 0.1);
                  }
    card_mod:
      style: |
        ha-card {
          background: rgba(var(--rgb-primary-background-color), 0.1);
          --paper-item-icon-active-color: #2196f3;
          --paper-item-icon-color: #6f6f6f;
        }
        :host {
          --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);

        }

2 Likes

Thank you so much

1 Like

Hi,

Sorry for late reply.
I set the cover card param

icon_type: entity-picture

And added attribute to cover entity using cutomize.yaml

cover.volet_amis_prop:
  entity_picture: "/local/images/devices/volets/volet65.png"
1 Like

Can you share info on your salt level sensor? I’ve considered doing this so I’d like to see how you get on.

Anyone have any ideas on this?

I finally switched to mushroom themes from google theme.
but how can i get rid of this line seperating the two entries?
image

This is a Mushroom Horizontal Bar Gauge you could use:

Mushroom Bar Card - Dark
Mushroom Bar Card - Light

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 42px auto
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.disk_use
        icon: mdi:harddisk
        icon_color: green
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-box-shadow: 0px;
            }
      - type: custom:bar-card
        entity: sensor.disk_use
        height: 42px
        min: '0'
        max: '250'
        entity_row: true
        color: rgb(var(--mush-rgb-green))
        positions:
          icon: 'off'
          indicator: 'off'
        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              --bar-card-border-radius: 12px;
            }
            bar-card-value {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-name {
              margin: 12px;
              font-size: 12px;
              font-weight: bolder;
            }
            bar-card-backgroundbar {
              opacity: 0.2;
              filter: brightness(1);
            }

This uses stack-in-card, card-mod, layout-card, mushroom-template-card & bar-card.

Update: Removed box shadow and improved bar color to match Mushroom

14 Likes

I’m not sure what you are trying to do? Do you want the bottom cards to look like the Master bedroom card?

I want the first card that’s a custom template card (the one with a picture) to look like the bottom card that uses a mushroom light card. Meaning the same size. The card size is significantly different right now. I prefer the big boxy look for this application.

You can comment out or remove these background bits like this:

    card_mod:
      style: |
        :host([dark-mode]) {
          #background: rgba(var(--rgb-primary-background-color), 0.2);
        } 
        :host {
          #background: rgba(var(--rgb-primary-text-color), 0.025);
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -18px !important;
        }
1 Like

Thanks :slight_smile: it works and looks so much better.

1 Like

Perfect, will give it a go!

1 Like

This is the code for the regular light card…

All I changed is from a light card to a template card.

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
filter:
  include:
    - domain: light
      state: 'on'
      entity_id: /[li]ghts/
      options:
        type: custom:mushroom-light-card
        vertical: true
        tap_action: none
        hold_action:
          action: toggle
        double_tap_action:
          action: more-info
        card_mod: null
        style: |
          mushroom-shape-icon {
          --shape-color: none !important;
          --shape-color-disabled: none !important;}
          ha-card {
          --ha-card-background: transparent;
          --card-primary-font-size: 12px;
          --icon-symbol-size: 55px;
          }
sort:
  method: entity_id

Template card.

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
filter:
  include:
    - domain: light
      state: 'on'
      entity_id: /[li]ghts/
      options:
        type: custom:mushroom-template-card
        primary: '{{ states[entity].name }}'
        secondary: '{{ states(entity) | title }}'
        picture: local/icons/custom_icons/ceiling-lamp.png
        vertical: true
        tap_action: none
        hold_action:
          action: toggle
        double_tap_action:
          action: more-info
        card_mod: null
        style: |
          mushroom-shape-icon {
          --shape-color: none !important;
          --shape-color-disabled: none !important;}
          ha-card { 
          background: transparent;
          width: px;
          border-radius: 30px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 2px;
          --icon-border-radius: 0;
           }
sort:
  method: entity_id
1 Like