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

Hi All,

Is it correct that the mushroom cards not using the icon-color set when using customise in HA?

---
###########################################################################################
# CUSTOMIZE_GLOBAL
# https://www.home-assistant.io/docs/configuration/customizing-devices
###########################################################################################
"switch.*":
  templates:
    icon_color: if (state === 'on') return '#1E90FF'; return 'black';

Using normal entity card the icon is black when off and blue when on.
in mushroom-entity-card the icon is light grey when off and also blue when on.

If this is a normal behaviour then I don’t need to search where this go wrong… :wink:

pretty all ill use if its icon color or changed for an icon

          {% set state = states(entity) %} {% if state == 'on' %}
            #ADFF2F
          {% elif state == 'off' %}
             #9E9E9E
          {% endif %}

This is based on template mushroom? The way how i do it is global. So for all switches that are created

They are indeed. Just inspect element and then drill down.

i know its been awhile but i cant get the drop down to work

UPDATE PLEASE READ THIS POST INSTEAD HERE.

i figured since there seem have been quite a few questions (likely because of the recent update) about how to target certain elements in Mushroom cards with Card Mod that i would try and make a comprehensive guide on how to style each element in mushroom cards.

First things first to get it out of the way. Card Mod is technically not supported by Mushroom. it works in most instances. but if anything breaks in the future it is up to you to update your yaml config for the card.
i will try and keep these guides updated for as long as possible. so if you spot something that no longer works let me know.

i am only going to give some examples of styles you can apply. this is only intended to help you understand how to target certain things in mushroom cards.

Icon Only Styling

if you want to style the ICON Itself Only:
image

card_mod:
  style: |
    ha-state-icon {
      --card-mod-icon: mdi:mushroom;
      color: lightgreen;
      --icon-symbol-size: 40px;
    }

Notice that the color set only affects the ICON itself. not the SHAPE background. this is blue, because in the visual editor the icon color is set to blue. this is just overwritten for the icon itself in Card Mod.

This applies to any Mushroom card that has 1 single icon in it. i tested all single icon cards that i have a device for. and all work the same way.

Shape/Background Styling

if you instead wanted to style the background of the mushroom icon. it can be done like this.
image

card_mod:
  style: |
    mushroom-shape-icon {
        --shape-color: rgba(255, 178, 0, 0.5) !important;
        --icon-symbol-size: 21px;
        --icon-size: 100px;
      }

setting the --icon-symbol-size to 21px keeps it the same size as original. and you are then free to apply any styling to the background itself.

Text Styling

In general if you want to style text on almost any Mushroom card it can be completed like this:
image

card_mod:
  style: |
    ha-card {
      --secondary-text-color:  rgb(var(--rgb-green));
     --card-secondary-font-size: 40px;
     --card-primary-font-size: 10px;
     --primary-text-color: rgb(var(--rgb-red));
     font-family: 'Lucida Console';
     font-weight: 1;
    }

Notice that the font weight is set to 1. this actually does decrease the weight of the text.
also a note that this same styling now works for title card as well.
image
it does however seem that the secondary and primary are flipped for some reason. not a big issue to work around :slight_smile:

Card Background Styling

In order to style background it is quite easy. you only need to add the below:
image

card_mod:
  style: |
     ha-card { 
       background-color: #0c3b0c;
     }

Just to give a bit extra on this one. i like changing this based on the theme being used on the device (dark or light).

card_mod:
  style: |
     @media (prefers-color-scheme: dark) {
       ha-card { 
         background-color: #0c3b0c;
       }
     }
     @media (prefers-color-scheme: light) {
       ha-card { 
         background-color: #defce0;
       }
     }

image
vs
image

Chip Styling

This section doesnt refer to styling the chip card, but the chips themselves instead.
in order to style a specific chip i have found that the below works best:

use card mod under the chip itself if you are changing the background. careful if you are using a conditional chip to put this under the chip that you create under the conditional chip.
image

  - type: conditional
    conditions:
      - entity: input_boolean.dishwasher
        state: 'on'
    chip:
      type: template
      double_tap_action:
        action: none
      entity: sensor.kitchen_dishwasher_plug_power
      icon: mdi:dishwasher
      icon_color: |-
        {% if states('input_boolean.dishwasher') == 'on' %}
        #8489fa
        {% else %}
        #87ff7d
        {% endif %}
      content: |-
        {% if states('input_boolean.dishwasher') == 'on' %}
          {% if states('timer.dishwasher_run_time') == 'active' %}
            {% set ct = state_attr('timer.dishwasher_run_time', 'finishes_at') | as_datetime %}
            {{ '00:00' if now() > ct else (ct - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}
          {% else %}
            0h 0m
          {% endif %}
        {% else %}
        {% endif %}
      card-mod: 
      style: |
        ha-card {
          {% if states('input_boolean.dishwasher') == 'on' %}
            --chip-background: #001f5c;
          {% else %}
            --chip-background: #175400;
          {% endif %}
        }

but if you are doing anything else, especially fancy things like animations. i would recommend putting it under the major chip card instead, and then drilling down to your specific chip. change the nth-child(1) to however many conditional chips you have. and then remember to drill down to your right chip type that is under your conditional chip.
Untitled video - Made with Clipchamp (1)

type: custom:mushroom-chips-card
chips:
  - type: conditional
    conditions:
      - entity: input_boolean.dishwasher
        state: 'on'
    chip:
      type: template
      entity: sensor.kitchen_dishwasher_plug_power
      icon: mdi:dishwasher
      icon_color: |-
        #8489fa
      content: |-
            0h 0m
      card-mod: 
      style: |
        ha-card {
            --chip-background: #001f5c;
        }
card_mod:
  style:
    mushroom-conditional-chip:nth-child(1):
      mushroom-template-chip$: |
        ha-state-icon {
            animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
            transform-origin: 50% 75%;
          }
          @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 
            40% { transform: translateY(-1.2px) rotate(5deg); } 
            60% { transform: translateY(-1.1px) rotate(-4deg); } 
          } 
          @keyframes wash {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
          }

animation courtesy of @rhysb :smiley:

Style Icon in Buttons

if you only have 1 single button on your card it can be accomplished to change the icon this way:
image

card_mod:
  style:
    mushroom-button$: |
      ha-icon {
        --card-mod-icon: mdi:mushroom;
        --card-mod-icon-color: orange;
        --control-icon-size: 50px;
      {

problems arise when you have multiple buttons on the same card, as with this method only 1 will be styled.
image
You can get around this by doing the below:
image

card_mod:
  style:
    mushroom-button:nth-child(1):
      $: |
        :host {
          background-color: red;
          border-radius: 12px;
        }
        ha-icon {
          --card-mod-icon: mdi:mushroom;
          --card-mod-icon-color: orange;
          --control-icon-size: 50px;
        }

Just increment the nth-child(1) by 1 for how many buttons you have on your mushroom card and then style them individually.

Style Dropdown

The text, background and icon in a dropdown can be styled like this:
image

card_mod:
  style: |
    :host {
      --mdc-select-fill-color: lightblue;
      --mdc-select-ink-color: blue;
      --mdc-select-dropdown-icon-color: red;
    }

unfortunately it doesnt seem like you can change the icon for the dropdowns. if anyone can find a way to change this, let me know and ill add it here :slight_smile:

big thanks to @piitaya for creating such lovely looking cards that mostly you dont even need to do this with, because they are nice looking and customizable enough in the first place.
also a big thanks to @rhysb as always. a lot of the knowledge in here comes from him scattered across this forum.

Part 1 Part 2

47 Likes

UPDATE PLEASE READ THIS POST INSTEAD HERE.

Part 1 Part 2

Continued from Part 1 linked above. please read the original post first to understand what these code snippets are meant to help with.

TLDR, how to target certain elements of mushroom cards with Card Mod.

Also just wanted to add that alot of the time there is more than 1 way to complete these same things, and its hard to find out what the “best” way is. so if you find a way that you think is better/easier. let me know in a message :slight_smile:

Style Other Buttons (Climate, Input Number, Cover, etc.

For some reason the buttons on the input number (and number selection on climate cards) are not the same type as the other buttons, so you have to target them slightly differently, but this can be accomplished as such:

Climate card (courtesy of @glyn). this also helped me figure out the other cards.
image

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
          --card-mod-icon: mdi:mushroom;
          --card-mod-icon-color: orange;
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
          --card-mod-icon: mdi:mushroom;
          --card-mod-icon-color: blue;

Input Number Card:
image

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-input-number$: |
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
        }        
        #container .button:nth-child(1) {
          background: rgba(var(--rgb-blue), 0.2);
          --card-mod-icon: mdi:mushroom;
          --card-mod-icon-color: orange;
        }
        #container .button:nth-child(3) {
          background: rgba(var(--rgb-red), 0.2);
          --card-mod-icon: mdi:mushroom;
          --card-mod-icon-color: blue;
        }

Cover Card (back to being similar to the other buttons, but still not exactly the same).
image

card_mod:
  style:
    mushroom-cover-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Lock Card:
image

card_mod:
  style:
    mushroom-lock-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Update Card:
image

card_mod:
  style:
    mushroom-update-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Media Card:
image

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Sure this would also work for a Vacuum, Fan, and Humidifier cards. but unfortunately i dont have devices for these. my assumption is that it would work like the above but be like the below instead but until someone can verify for me i am not 100% sure:

Vacuum:

card_mod:
  style:
    mushroom-vacuum-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Fan:

card_mod:
  style:
    mushroom-fan-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }

Humidifier:

card_mod:
  style:
    mushroom-humidifier-buttons-control$:
      mushroom-button:nth-child(1):
        $: |
          :host {
            background: rgba(var(--rgb-blue), 0.2);
            border-radius: 12px;
          }
          ha-icon {
            --card-mod-icon: mdi:mushroom;
            --card-mod-icon-color: orange;
            --control-icon-size: 50px;
          }
Style Text that isnt Primary or Secondary

You can style text that is outside the header of the card like this:

Climate Card:
image

card_mod:
  style:
    mushroom-climate-temperature-control$:
      mushroom-input-number$: |
        #container .value{    
          font-family: 'Lucida Console';
          font-size: 30px;
          color:  rgb(var(--rgb-green));
        }

Input Number Card:
image

card_mod:
  style:
    mushroom-number-value-control$:
      mushroom-input-number$: |
        #container .value{    
          font-family: 'Lucida Console';
          font-size: 30px;
          color:  rgb(var(--rgb-green));
        }

etc. i am sure there are other cards with values that you could style.

Style Sliders

Light Slider (courtesy of @rhysb):
image

card_mod:
  style:
    mushroom-light-brightness-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

Media Player:
image

card_mod:
  style:
    mushroom-media-player-volume-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

Input Number:
image

card_mod:
  style:
    mushroom-number-value-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

Cover Card:
image

card_mod:
  style:
    mushroom-cover-position-control$: |
      mushroom-slider {
        --main-color: teal !important;
        --bg-color: #d1eced !important;
      }

etc. if there are any more card with sliders, i am sure you can figure it out. just inspect element and look at the name of the “mushroom-xxx-xxx-control” and use that as the name :slight_smile:
image

And that is all i could think of for now to style. if you have any suggestions that could make for a Part 3. let me know :slight_smile:

37 Likes

You should really make your own thread out of this! :+1: It is by far the best explanation for the newly updated versions. And in 7000 posts, even with the thread search function, it will likely be missed by many people. And honestly, it deserves its own thread. :wink:

My suggestion would be, take the text from the posts above and just copy it to a new thread. No need to delete it here, it’s good to have it here as well. And post the link to that thread right here, so people find it.

But be aware, it will result in more questions to you. :rofl:

Just saying… :wink:

EDIT: if you want to, you can always post it under “Community Guides”, where others are able to edit the first post. just if you want to! :slight_smile:

5 Likes

Good suggestion thank you. ill do that, when i do i will change the scope then slightly and go through each Card one by one instead so that people can see all of the options.

i think this might be more helpful if i am going to start a whole new thread about it :slight_smile:

10 Likes

Good plan, I’m waiting patiently for the link to the new thread :smiley: :wink:

Is it possible to change the font ?

I want the velux type the same as the others…

- type: horizontal-stack
        cards:
        - type: custom:mushroom-template-card
          primary: Screen Links         
       - type: 'custom:time-picker-card'
         entity: input_datetime.velux_invoer_uur
         hour_mode: 24
         name: Velux wekker

First I need to know what is the font of the mushroom card to change the other card. So I think my question placed here is ok ?

Hello
image
Can I set the font/icon size on this card in card mod?

Is this a mushroom card? If not i would take this question to the card mod page. And if/when you do, post your yaml.

Can anyone help me to get the primary and secondary text for a Mushroom entity card onto the same line, rather than on top of each other? I’m using card_mod but can’t for the life of me work out how to do this.

This seems to work

type: custom:mushroom-title-card
title: Primary Title
subtitle: Some subtitle
card_mod:
  style: |
    ha-card > div {
      display: inline-block;
    }

Thanks for this. Worked for a title card, but didn’t for an entity card :frowning:

Sorry, I misread it as the title card.

This should work for an entity card

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        flex-direction: row !important;
        align-items: baseline;
        gap: 10px;
      }

The .container element is a flexbox so I just changed it to row and added alignment and a gap between the children elements.
Here is some more info on flexbox A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

This worked! Thank you so much

Hi @Guizmos I really like this approach.

I have now configured a dashboard with this config and changed to use my own entities.
I do have some issues with popup cards, how do I get them to be transparent or the gray color you have? Mine is just the white popup.
Is this the Theme? what theme are you using?

I also have issues getting the swipe card background to change based on the media being played.

Thank you

Small breaking change for card mod animation with 3.0.5 release . It was necessary to clarify how to customize animation because there was multiple way to do it and some doesn’t work for some browsers.

--icon-animation has been removed because it doesn’t work on Safari iOS with custom animations.
If you want to customize icon animation, you must use ha-state-icon selector with animation property.

Example

card_mod:
  style: |
    ha-state-icon {
      animation: spin infinite linear spin;
    }
4 Likes