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

Zenia · January 26, 2024, 10:00pm

It’s interesting, but even a simple template return just a house #
I know it’s not a right place to ask ,but why?

Thank you for help

LiQuid_cOOled · January 27, 2024, 1:51am

Yes you are correct. There is specific set of variables that can be changed and those variables are specifically defined in the JavaScript. The rest of the variables cannot be adjusted via the theme settings.

The way I read the code, these are the only variables adjustable via a theme.

I moved away from a theme a while back so I may not be the best person to answer your question.

Mushroom:
    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 12px
    # Mushroom layout
    mush-spacing: 12px
    # Title
    mush-title-padding: 24px 12px 16px
    mush-title-spacing: 12px
    mush-title-font-size: 24px
    mush-title-font-weight: normal
    mush-title-line-height: 1.2
    # Subtitle
    mush-subtitle-font-size: 16px
    mush-subtitle-font-weight: normal
    mush-subtitle-line-height: 1.2
    # Card
    mush-card-primary-font-size: 14px
    mush-card-secondary-font-size: 12px
    mush-card-primary-font-weight: bold
    mush-card-secondary-font-weight: bolder
    mush-card-primary-line-height: 1.5
    mush-card-secondary-line-height: 1.5
    # Chip
    mush-chip-spacing: 8px
    mush-chip-padding: 0 0.25em
    mush-chip-height: 36px
    mush-chip-border-radius: 18px
    mush-chip-font-size: 0.3em
    mush-chip-font-weight: bold
    mush-chip-icon-size: 0.5em
    mush-chip-avatar-padding: 0.1em
    mush-chip-avatar-border-radius: 50%
    mush-chip-background: var(--ha-card-background)
    # Control
    mush-control-border-radius: 12px
    mush-control-height: 42px
    mush-control-button-ratio: 1
    mush-control-icon-size: 0.5em
    # Slider
    mush-slider-threshold: 10
    # Badge
    mush-badge-size: 16px
    mush-badge-icon-size: 0.75em
    mush-badge-border-radius: 50%
    # Icon
    mush-icon-border-radius: 50%
    mush-icon-size: 42px
    mush-icon-symbol-size: 0.5em
    # Colors
    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

    mush-rgb-info: var(--mush-rgb-blue)
    mush-rgb-success: var(--mush-rgb-green)
    mush-rgb-warning: var(--mush-rgb-orange)
    mush-rgb-danger: var(--mush-rgb-red)

    mush-rgb-state-fan: var(--mush-rgb-green)
    mush-rgb-state-light: var(--mush-rgb-orange)
    mush-rgb-state-entity: var(--mush-rgb-blue)
    mush-rgb-state-switch: var(--mush-rgb-blue)

    mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
    mush-rgb-state-alarm-armed: var(--mush-rgb-success)
    mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)

    mush-rgb-state-person-home: var(--mush-rgb-success)
    mush-rgb-state-person-not-home: var(--mush-rgb-danger)
    mush-rgb-state-person-zone: var(--mush-rgb-info)
    mush-rgb-state-person-unknown: var(--mush-rgb-grey)

    mush-rgb-state-cover-open: var(--mush-rgb-blue)
    mush-rgb-state-cover-closed: var(--mush-rgb-disabled)

    mush-rgb-state-climate-auto: var(--mush-rgb-green);
    mush-rgb-state-climate-cool: var(--mush-rgb-blue);
    mush-rgb-state-climate-dry: var(--mush-rgb-orange);
    mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
    mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
    mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
    mush-rgb-state-climate-idle: var(--mush-rgb-grey);
    mush-rgb-state-climate-off: var(--mush-rgb-disabled);

    # You must keep this to support light/dark theme
    modes:
        light:
            mush-rgb-disabled: 189, 189, 189
        dark:
            mush-rgb-disabled: 111, 111, 111

LiQuid_cOOled · January 27, 2024, 1:52am

Just a suggestion, if you are seeing a significant lag.

RkcCorian · January 27, 2024, 6:28am

Many thanks! And therefore I’m confused as I try to use…
´´´
mush-rgb-state-cover-open: var(–mush-rgb-blue)
mush-rgb-state-cover-closed: var(–mush-rgb-disabled)
´´´
…and this is not working

Anybody else an idea?

LiQuid_cOOled · January 27, 2024, 6:37am

Are you still using your own theme? if so you need to declare the colors for these as well.

I thought we added pink and orange in a past post. It would be the same for the additional colors you listed in this post.

mush-rgb-pink: 233, 30, 99
mush-rgb-orange: 255, 152, 0

add these

mush-rgb-blue: 0, 0, 255
mush-rgb-disabled: 111, 111, 111

Your customized theme will need the following to be included for the Mushroom standard cards colors to work correctly.

# Colors
    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

    mush-rgb-info: var(--mush-rgb-blue)
    mush-rgb-success: var(--mush-rgb-green)
    mush-rgb-warning: var(--mush-rgb-orange)
    mush-rgb-danger: var(--mush-rgb-red)

    mush-rgb-state-fan: var(--mush-rgb-green)
    mush-rgb-state-light: var(--mush-rgb-orange)
    mush-rgb-state-entity: var(--mush-rgb-blue)
    mush-rgb-state-switch: var(--mush-rgb-blue)

    mush-rgb-state-alarm-disarmed: var(--mush-rgb-info)
    mush-rgb-state-alarm-armed: var(--mush-rgb-success)
    mush-rgb-state-alarm-triggered: var(--mush-rgb-danger)

    mush-rgb-state-person-home: var(--mush-rgb-success)
    mush-rgb-state-person-not-home: var(--mush-rgb-danger)
    mush-rgb-state-person-zone: var(--mush-rgb-info)
    mush-rgb-state-person-unknown: var(--mush-rgb-grey)

    mush-rgb-state-cover-open: var(--mush-rgb-blue)
    mush-rgb-state-cover-closed: var(--mush-rgb-disabled)

    mush-rgb-state-climate-auto: var(--mush-rgb-green);
    mush-rgb-state-climate-cool: var(--mush-rgb-blue);
    mush-rgb-state-climate-dry: var(--mush-rgb-orange);
    mush-rgb-state-climate-fan-only: var(--mush-rgb-blue-grey);
    mush-rgb-state-climate-heat: var(--mush-rgb-deep-orange);
    mush-rgb-state-climate-heat-cool: var(--mush-rgb-green);
    mush-rgb-state-climate-idle: var(--mush-rgb-grey);
    mush-rgb-state-climate-off: var(--mush-rgb-disabled);

    # You must keep this to support light/dark theme
    modes:
        light:
            mush-rgb-disabled: 189, 189, 189
        dark:
            mush-rgb-disabled: 111, 111, 111

I hope that makes sense

olelli · January 27, 2024, 10:01am

Hi, I would like to convert the “shutter group” card from custom:cover-position-preset-row, to a Mushroom card but I don’t know which one can indicate the various positions of the state of the roller shutters, as in the attached photo. What do you recommend?
Screenshot 2024-01-26 234947

- type: entities
    title: Tapparelle
    show_header_toggle: false
    state_color: true
    entities:
      - type: custom:cover-position-preset-row
        name: Tapparelle
        entity: group.cover
        reverseButtons: true

        customTheme: false
        isOpenedColor: '#ffff00'
        isMidOpenedColor: '#ffbf00'
        isMidClosedColor: '#cc0000'
        isClosedColor: '#4169e1'
        buttonInactiveColor: '#ffffff'

        customSetpoints: true
        openPosition: 100
        midOpenPosition: 85
        midClosePosition: 40
        closePosition: 15
#       customText: false
        width: '40px'
        height: '40px'

RkcCorian · January 27, 2024, 1:20pm

Ahhh… this was missing, it is working now Many many thanks!!!

One additional question… I try to remove the shape-color via theme. Do you have an idea how I can reach this. I tried different code like the following without success…

my_theme:
  style: |
    mushroom-shape-icon {
      shape-color: var(--mush-rgb-red) !important;
    }

At the end the same like using…

        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
              }

… but at one central place and without the need to add at every card + I have the problem when reloading the dashboard the shape is there for around one second and only after goes away.

Many thanks!

FedeL16 · January 27, 2024, 5:24pm

you write me thanks to inspiration. you are welcome! but i dont understand how i could give you inspiration, can you show me the result of evolution of my person card?

thank you

Mariusthvdb · January 27, 2024, 6:36pm

O right haha. I misunderstood what you meant.

I did post the full card in that link . Very happy with it.

LiQuid_cOOled · January 27, 2024, 7:20pm

You cannot do it via the theme that I know of. I direct messaged you an alternative.

andrezstar2 · January 27, 2024, 10:35pm

OMG you are the man, thanks a lot!

Zenia · January 28, 2024, 12:43am

Good day everyone. I found what was going on with my address. It was simple, but unusual. For some reason Name of my address was just a house #. I changed and now it’s working like a charm. Thank you guys for your help and everything what you do for our HA community

HyperAbarth · January 28, 2024, 12:50am

Hope someone can help me out with this:

I have a template card for a light switch. It has secondary information lines for temperature and humidity. Furthermore it has a badge for the motion sensor in that room. If that motion sensor is triggered it enables the light and starts a countdown timer (helper) of 15 minutes. When that timer reaches 0 it turns off the light.

For now I am using a custom vertical stack in card which contains the template card together with a timer-bar-card in a condition card to visually display the amount of time left when the timer helper is active. But that timer-bar-card popping up is messing up the lay-out of the dashboard:

I was inspired by Rhys post here and tried to replicate it using the timer helper, which would be a much more elegant solution. But I cannot get it to work. It seems that however I reference the timer helper it does not display. The timer helper (timer.verlichting_magazijn) is not used in the template card itself, which I guess might be part of the issue I am having.

What I am looking for is a round progress bar around the lightbulb icon, in the same color as the icon, that “counts” back (counter clockwise) that represents the amount of time left in the timer helper and is updated/refreshed every (few) second(s) and is only visible when the timer is active.

Something like this:

This is the template card code I am using:

type: custom:mushroom-template-card
primary: Magazijn
secondary: >
  {{states.sensor.lumi_lumi_weather_temperature_4.state_with_unit}},
  {{states.sensor.lumi_lumi_weather_humidity_4.state_with_unit}}
icon: mdi:lightbulb-group
layout: vertical
entity: light.magazijn_lampen
icon_color: |-
  {% set state=states('light.magazijn_lampen') %}
        {% if state=='on' %}
        orange
        {% endif %}
fill_container: false
multiline_secondary: false
hold_action:
  action: more-info
badge_color: |-
  {% if is_state('binary_sensor.magazijn_smart_motion_human', 'on') %}
  red
  {% elif is_state('binary_sensor.magazijn_smart_motion_human', 'off') %}
  transparent
  {% endif %}
badge_icon: |-
  {% if is_state('binary_sensor.magazijn_smart_motion_human', 'on') %}
  mdi:motion-sensor
  {% elif is_state('binary_sensor.magazijn_smart_motion_human', 'off') %}
  mdi:none
  {% endif %}
double_tap_action:
  action: none

RkcCorian · January 28, 2024, 10:18am

    --ha-card-header-color: red;
    --ha-card-header-font-size: 20px;

works but…

    --ha-card-header-padding: 12px 8px 8px;

…not. Any idea what I do wrong?

Full code…

type: custom:mod-card
style: |
  ha-card {
    --ha-card-header-color: red;
    --ha-card-header-font-size: 20px;
    --ha-card-header-padding: 12px 8px 8px;
  }
card:
  type: vertical-stack
  title: Zeit & Wetter
  cards:
    - type: entity
      entity: sensor.date_time
      name: Zeit
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      name: ' '

LiQuid_cOOled · January 28, 2024, 10:32am

*I think you are looking for margins. Padding would be on the individual cards.

example settings
margin: 25px 50px 75px;

top margin is 25px
right and left margins are 50px
bottom margin is 75px

type: custom:mod-card
style: |
  ha-card {
    --ha-card-header-color: red;
    --ha-card-header-font-size: 20px;
    --vertical-stack-card-margin: 0px 20px 10px 20px;
  }
card:
  type: vertical-stack
  title: Zeit & Wetter
  cards:
    - type: entity
      entity: sensor.date_time
      name: Zeit
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      name: ' '

LiQuid_cOOled · January 28, 2024, 10:39am

Found a better way

type: custom:mod-card
card:
  type: vertical-stack
  title: Zeit & Wetter
  cards:
    - type: entity
      entity: sensor.date_time
      name: Zeit
    - show_current: true
      show_forecast: true
      type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      name: ' '
card_mod:
  style: |
    ha-card {
      padding-top:30px;
      color: red !important;
      font-size: 10px;
      --ha-card-header-font-size: 20px;
      --ha-card-header-color: blue  !important;
       }

RkcCorian · January 28, 2024, 10:54am

Nearly… I would like to reduce the spaceing before and after the heading/title. With padding it adds a space only, or I’m wrong?

LiQuid_cOOled · January 28, 2024, 10:57am

just use a negative number, -10px for example.

RkcCorian · January 28, 2024, 4:15pm

It does not work for me unfortunately. I think to use “custom:mushroom-title-card”. Would it be possible there to reduce the spacing here somehow?

My code

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Zeit & Wetter
    title_tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
  - type: entity
    entity: sensor.date_time
    name: Zeit
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    name: ' '

LiQuid_cOOled · January 28, 2024, 6:49pm

This should work. I’ll direct message you as well.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Zeit & Wetter
    title_tap_action:
      action: navigate
      navigation_path: /dashboard-test/sicherheit
    card_mod: 
      style: |
        ha-card {
        --title-padding: 10px 10px 1px;
        --title-font-size: 15px;
        --primary-text-color: red;
        --title-font-weight: 400;
         }  
  - type: entity
    entity: sensor.date_time
    name: Zeit
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    forecast_type: daily
    name: ' '