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

[Vintage89]

Just with sensors.

Code if it helps

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-entity-card
    name: Fuktighet
    icon: mdi:water
    entity: sensor.tomat_plante_manuel_moisture
    layout: vertical
  - type: custom:mushroom-entity-card
    name: Lys
    icon: mdi:weather-sunny
    icon_color: amber
    entity: sensor.tomat_plante_manuel_brightness
    layout: vertical
  - type: custom:mushroom-entity-card
    name: Temperatur
    icon_color: light-green
    entity: sensor.tomat_plante_manuel_temperature
    layout: vertical
  - type: custom:mushroom-entity-card
    name: Gjødsel
    icon: mdi:sprout
    icon_color: brown
    entity: sensor.tomat_plante_manuel_conductivity
    layout: vertical

[Danny2100]

Thank you. What I’m really looking for is how someone handled the ability to select from an input select. Was it simply using a tap action: more-info or did they use something more elegant to avoid using that generic page/pop-up.

[KyleBrown0221]

Simple question here but trying to figure out best way to do it. I’m trying have a dropdown from the “All Living Room Switches.” Any thoughts/code on how to do that or do I have to use custom conditional card and custom card mod and write the code? Obviously using Mushroom to avoid any yaml editing for my basic needs like this. Would like to do it from the “double tap action” option

[meni123 (Meni)]

It looks very impressive.
I would really love to see a code for a rss weather forecast,

[pbohannon (PB)]

Thank you for the reply. So I guess I have to bite the bullet and confront something I’d been wary of my own understanding all along I’ve noted the various comments in the thread about the separate Theme package but never quite understood how to put it into practice. When installed manually or through HACS, the actual theme files are just a few lines long (3-5) however the Github page lists several pages of variables. I’ve just assumed that what we see on the Github page we get for “free” in the cards themselves, and if we wanted to extend the theme out to non-Mushroom cards one would just need to include the variables listed in Github in the actual theme file loaded by HA. Is that right? That’s what I’ve done to try and expose the colors for this use-case, anyway. My mushroom.yaml theme file now contains everything listed in the Github and I think I have many more variables available to me when working through Inspector.

However… I still can’t seem to get this licked. Original problem statement just for recap was that I’d like to use you (Rhys’) room card or something similar but vary the colors of the individual rooms a bit. So the icon color is easy enough to set, but it’s the rest of the card’s background I’m having trouble setting. Would you mind terribly to share a snippet of one of your room cards where one of the target rooms utilizes a color other than the default/orange?

Thank you!

[rhysb (Rhys)]

The Mushroom theme settings allow you to customize/override the the default settings of the Mushroom cards. For instance if you want to use amber for the lights, instead of orange, you can override it by adding mush-rgb-state-light: var(--mush-rgb-amber) to your theme file. In the same way you can change what red is by specifying a different value for mush-rgb-red, say pure red with mush-rgb-red: 255, 0, 0. Now every time a Mushroom card uses red it will be this new value of red we have specified in our theme. These ‘mush’ values are only for Mushroom cards, they don’t affect any of the normal HA cards. The advantage of specifying the ‘mush’ values in a theme, even if we do not change them, is that they are now available to be used in CSS anywhere.

This is what I have in my Mushroom theme file:

mushroom-custom.yaml

Mushroom Custom:
    # HA variables
    ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
    ha-card-border-radius: 20px
    # 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-box-shadow: var(--ha-card-box-shadow)
    #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.8em
    #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-amber)
    #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

As you can see, most of it is commented out. I mainly use it for the mush-rgb-[color] values.

To apply this to my Room card we can now do this:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} °C'
    icon: mdi:sofa
    entity: light.lounge_light
    tap_action:
      action: navigate
      navigation_path: lounge
    hold_action:
      action: toggle
    icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    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;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: conditional
        conditions:
          - entity: binary_sensor.lounge_motion_occupancy
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:motion-sensor
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: media_player.lounge_tv
            state_not: 'off'
          - entity: media_player.lounge_tv
            state_not: unavailable
        chip:
          type: template
          icon_color: disabled
          icon: |-
            {% set media_type = state_attr('media_player.lounge_tv',
            'media_content_type') %}
            {% 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 %}
          tap_action:
            action: none
          hold_action:
            action: none
      - type: conditional
        conditions:
          - entity: climate.air_conditioner
            state_not: 'off'
        chip:
          type: template
          entity: climate.air_conditioner
          icon_color: disabled
          icon: |-
            {% if is_state(entity, 'heat_cool') %}
              mdi:sync 
            {% elif is_state(entity, 'heat') %}
              mdi:fire
            {% elif is_state(entity, 'cool') %}
              mdi:snowflake
            {% elif is_state(entity, 'dry') %}
              mdi:water-percent
            {% elif is_state(entity, 'fan_only') %}
              mdi:fan
            {% else %}
              mdi:air-conditioner
            {% endif %}
          tap_action:
            action: none
          hold_action:
            action: none
          card_mod:
            style: |
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              ha-card {
                {% if is_state('climate.air_conditioner', 'fan_only') %}
                   animation: rotation 2s linear infinite;
                {% endif %}
              }
      - type: conditional
        conditions:
          - entity: group.lounge_windows
            state: 'on'
        chip:
          type: template
          icon_color: disabled
          icon: mdi:window-open
          tap_action:
            action: none
          hold_action:
            action: none
    alignment: end
    card_mod:
      style: |
        ha-card {
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }
card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.lounge_light', 'on') %}
        background: rgba(var(--mush-rgb-red), 0.1);
      {% endif %}
    }

The last card_mod: style: is being applied to the stack-in-card, which is not a Mushroom card so cannot see the dynamically created --rgb-[color] values. However it can see the --mush-rgb-[color] values that we have defined in our theme file.

Alternatively we can find the value of --rgb-orange and manually specify that in our CSS, which is what I originally did with my Room card:

card_mod:
  style: |
    ha-card {
      height: 102px;
      {% if is_state('light.lounge_light', 'on') %}
         background: rgba(255, 152, 0, 0.1);
      {% endif %}
    }

I hope that’s clearer than mud .

[rhysb (Rhys)]

You can add paper-item-icon-active-color: 253, 216, 53 to your theme file. This defines the yellow in RGB values.

[Danny2100]

@rhysb have you used mushroom card/custom in stack card with input_selects and input_numbers? If yes can you share yaml/pictures?

I’m wondering how to make them take up less space while still having readable titles for each select/number.

3 input selects. 1 Input number and 1 input boolean. I’m trying to create an interface for custom light effects.

For a clean mobile setup I’m thinking the order should be

Input selects (horizontal or vertical)
Input number (horizontal or vertical)
Input Boolean (centered potentially)

[Pulpyy]

Simply use

relative_time(here.timestamp)

[coolhand]

Thanks for that @rhysb. But in my case, I would prefer to use the paper-item-icon-active-color that is already defined by the user-selected theme. I don’t want to explicitly define any color in particular, but rather just use the theme’s color. To be totally clear, I am not a css expert, so I might be missing something very simple. I guess maybe there must be a way to convert the already-defined paper-item-icon-active-color from a HEX to RGB so I can use the rgba function to adjust the opacity of the shape color, or perhaps there is already a mechanism in place to use the user-selected theme colors? Am I overthinking this, or is there no simple way to do this?

[image969 (James Scialdone)]

Anyone else having this issue with the climate cards? I just finally updated mushroom when I realized these are available, and if I pull down to refresh they work fine. But when I first open up HA, the card always looks like this.

[Mobiledude (Ronin)]

follow the thread of this guy above. heposted an example of what you want Mushroom Cards - Build a beautiful dashboard easily 🍄 - #1730 by berkans I managed to do it as well.

[nappyjim (Jim)]

Is there some way to make a search card?

I have the top bar hidden using kiosk mode and would like to keep it that way. But I would like a quick way to search for an entity I made not have specifically made a card for.

[benm7 (Ben M)]

Lovelace: A simple Search card

I have created a simple search card that makes it easy to search for entities and display them in the frontend. I thought that maybe someone else might find it useful, so I decided to publish it. Here’s a small demo: [image] It’s very basic and I will add new stuff over time. If you have any feature requests feel free to ask (or preferably write an issue on github). Enjoy!

[rhysb (Rhys)]

Having a static icon for the climate card is boring, so I decided to have it change with the mode:

type: custom:mushroom-climate-card
entity: climate.office_air_conditioner
hvac_modes:
  - heat_cool
  - heat
  - cool
  - fan_only
  - dry
show_temperature_control: true
collapsible_controls: false
name: Air Conditioner
card_mod:
  style: |
    mushroom-shape-icon {
      --card-mod-icon: 
      {% if is_state(config.entity, 'heat_cool') %}
        mdi:autorenew
      {% elif is_state(config.entity, 'heat') %}
        mdi:fire
      {% elif is_state(config.entity, 'cool') %}
        mdi:snowflake
      {% elif is_state(config.entity, 'dry') %}
        mdi:water-percent
      {% elif is_state(config.entity, 'fan_only') %}
        mdi:fan
      {% else %}
        mdi:air-conditioner 
      {% endif %};
    }

[Mosher]

This should be standard!

[Fabvero]

I would be very interested too.

[rhysb (Rhys)]

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this:

type: custom:mod-card
card:
  type: custom:mushroom-title-card
  title: I'd rather be picking
  subtitle: Mushrooms 🍄
card_mod:
  style:
    mushroom-title-card$: |
      .title {
        --primary-text-color: rgb(var(--rgb-grey));  
        --title-font-size: 20px;
        --title-font-weight: lighter;
      }
      .subtitle {
        --secondary-text-color: rgb(var(--rgb-red));  
        --subtitle-font-size: 32px;
        --subtitle-font-weight: bolder;
      }
      .header {
        --title-padding: 8px 24px 8px;
      }

[image969 (James Scialdone)]

Is no one else having this problem?

[rhysb (Rhys)]

I don’t use these myself, but you could do a Mushroom Input Select card something like this:

Compact:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: '{{ state_attr(entity, ''friendly_name'') }}'
    secondary: '{{ states(entity) }}'
    icon: mdi:audio-input-rca
    entity: input_select.amp_source
    icon_color: red
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: CD
          target:
            entity_id: input_select.amp_source
        icon: fas:compact-disc
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Record
          target:
            entity_id: input_select.amp_source
        icon: mdi:record-player
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Cassette
          target:
            entity_id: input_select.amp_source
        icon: mdi:cassette
        content_info: none
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Radio
          target:
            entity_id: input_select.amp_source
        icon: mdi:radio
        content_info: none
    alignment: justify
    card_mod:
      style: |
        ha-card {
          margin-top: 14px;
          margin-right: 12px;
          --chip-background: rgba(var(--rgb-disabled), 0.2);
          --chip-box-shadow: none;
        }

Expanded:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: '{{ state_attr(entity, ''friendly_name'') }}'
    secondary: '{{ states(entity) }}'
    icon: mdi:audio-input-rca
    entity: input_select.amp_source
    icon_color: red
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: CD
          target:
            entity_id: input_select.amp_source
        icon: fas:compact-disc
        content_info: name
        name: CD
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Record
          target:
            entity_id: input_select.amp_source
        icon: null
        content_info: name
        name: Record
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Cassette
          target:
            entity_id: input_select.amp_source
        icon: mdi:cassette
        content_info: name
        name: Cassette
      - type: entity
        entity: input_select.amp_source
        tap_action:
          action: call-service
          service: input_select.select_option
          data:
            option: Radio
          target:
            entity_id: input_select.amp_source
        icon: mdi:radio
        content_info: name
        name: Radio
    alignment: justify
    card_mod:
      style: |
        ha-card {
          margin: 0px 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 have previously shared an Input Number card:

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

Here is a Mushroom Input Number card if anyone needs one. It requires stack-in-card, mushroom-card, car-mod and my-slider from my-cards. [mishroom-input_number] type: custom:stack-in-card cards: - type: custom:mushroom-template-card entity: input_number.lounge_pc_volume icon: | {% set vol_level = states(entity) | float %} {% if vol_level == 0 %} mdi:volume-mute {% elif vol_level > 0.66 %} mdi:volume-high {% elif vol_level < 0.33 %} mdi…