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

[rhysb (Rhys)]

Try like this:

type: custom:vertical-stack-in-card
cards:
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        entity: climate.rb_lr_wallthermostat
        primary: Wohnzimmer
        secondary: '{{ states(''sensor.rb_lr_climatesensor_temperature'') }}°C'
        icon: mdi:thermostat
        icon_color: grey
        badge_icon: none
        badge_color: none
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
      - type: custom:mushroom-climate-card
        entity: climate.rb_lr_wallthermostat
        icon_type: none
        primary_info: none
        secondary_info: none
        show_temperature_control: true
  - type: custom:mushroom-chips-card
    card_mod:
      style: 
        mushroom-template-chip:nth-child(1)$: |
          ha-icon {
            {{ 'animation: spin 1s linear infinite;' if is_state('fan.rb_lr_ceilingfan_state', 'on') }}
          }
          @keyframes spin {
            100% { transform: rotate(360deg); }
          }       
        .: |
          ha-card {
            --chip-border-width: 0px;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-spacing: none;
            --chip-height: 40px;
            margin-top: 0px;
            margin-right: 5px;
          }
    alignment: end
    chips:
      - type: template
        entity: fan.rb_lr_ceilingfan_state
        content: Ventilator
        icon: mdi:fan
        icon_color: >-
          {{ 'orange' if is_state(entity, 'on') else
          'grey' }}
        tap_action:
          action: toggle
      - type: template
        content: Auto
        icon: mdi:thermostat-auto
        icon_color: >-
          {{ 'orange' if is_state('climate.rb_lr_wallthermostat', 'auto') else
          'grey' }}
        tap_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: auto
          target:
            entity_id: climate.rb_lr_wallthermostat
      - type: template
        content: Manu
        icon: mdi:thermostat
        icon_color: >-
          {{ 'orange' if is_state('climate.rb_lr_wallthermostat', 'heat') else
          'grey' }}
        tap_action:
          action: call-service
          service: climate.set_hvac_mode
          data:
            hvac_mode: heat
          target:
            entity_id: climate.rb_lr_wallthermostat

[0tto0o]

Does anyone know how I can use the Hue light color to change the icon_color in a mushroom template card?
I assume I have to use the attribute rgb_color, but I don’t know how I should do this.

[rhysb (Rhys)]

You can override the default lock state colors by adding the following to your theme:

    mush-rgb-state-lock-locked: var(--mush-rgb-red)
    mush-rgb-state-lock-unlocked: var(--mush-rgb-green)
    mush-rgb-state-lock-pending: var(--mush-rgb-orange)

You will also need to add the mush colors if you have not already defined them.

[rhysb (Rhys)]

You can do so like this:

type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
icon: mdi:led-strip-variant
entity: light.office_desk_light
icon_color: >-
  {{ '#%02x%02x%02x' % state_attr(entity, 'rgb_color') if is_state(entity, 'on')
  }}

[chicknlil25]

Stupid question then: how do I define the mush colors?

Much obliged.

[rhysb (Rhys)]

Have a look here:

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

If you want to match the Mushroom colors, add these variables to your theme: 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: …

[chicknlil25]

Perfect! Thank you so much. I was searching for “mush colors” and I guess I should have been searching for “mushroom colors”.

[Boostin4HP]

Because people generally consider the color green as things are ok (locked) and the color red as an error or problem (unlocked). I always want my doors to be locked and them to display Green so I visually can see everything is ok.

I never noticed a change in this, to my knowledge this is how it’s been since the lock card was added.

[dimmanramone]

I have already asked in the card-mod thread but I’m taking my chances here too

I have a sticky mushroom card that I want it too have different behavior in the home assistant app and the browser. The card-mod documentation states that a browser variable is available to use with jinja templates. I used the code bellow but it doesn’t work, so I obviously doing something wrong.

Any ideas?

  {% if browser == 'pixel7-app' %}
        top: 2px;
      {% else %}
        top: var(--header-height); 
      {% endif %}

[chicknlil25]

Different ways to logic it, then.

To me, red means “secured”.

Given that my front door is not just unlocked but open during my waking hours, seeing the “red” at night is a good visual reminder that yes, the door is closed and locked.

[albaras (Alberto)]

Hello! Do you know what could be happening here? When I try to display the input_select list I can’t see all the items

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 75px
      margin: '-4px -4px -8px -4px'
      padding: 0px'
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.vacuum_zonas
        layout: horizontal
        name: Zonas
        icon_color: light-green
        secondary_info: none
        primary_info: none
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0px;
            }      
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:play-circle-outline
        tap_action:
          action: call-service
          service: automation.trigger
          data:
            skip_condition: true
          target:
            entity_id: automation.vacuum_zonas
        hold_action:
          action: none
        double_tap_action:
          action: none
        icon_color: light-green
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0px;
            }

[delboydell]

Hello , could you possibly tell me where I am going wrong with your example? I have changed the entity to my lock, and changed the state from on to locked, but it does nothing, sorry if I am missing somthing simple but I am only just starting to use Yaml and its all new to me

type: custom:mushroom-template-card
primary: ‘{{ state_attr(entity, ‘‘friendly_name’’) }}’
icon: mdi:lock
entity: binary_sensor.alarm_front_door_locked
icon_color: >-
{{ ‘#%02x%02x%02x’ % state_attr(entity, ‘rgb_color’) if is_state(entity, ‘unlocked’)
}}

[Dibbler (Thomas Bail)]

@rhysb Thanks a lot it work for this card immediatly like a charm and my wife loves it. Unfortunately now my other climate acrds in this view whick do not have a fan, are getting an additional frame:

[andrew.vint]

@berkans Following your instructions and all seems to be self explanatory but i cant seem to get the generic camera working … getting the following error

anyomne else getting that … its a fire stick BTW

[tbrasser (Thomas Brasser)]

What I do is have kiosk mode setup with 2 configs, one for myself, one for all other users, where the latter ignores the entity config. Created an input_boolean.show_header helper which I use to toggle the header just for my user, which is the only way to do a lovelace refresh for example.

[rhysb (Rhys)]

A lock entity does not have a rgb_color attribute. What are you trying to do?

[rhysb (Rhys)]

Change those ones to also use vertical-stack-in-card.

[rhysb (Rhys)]

Have a look at my example here, in particular the overflow: visible part.

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

You can combine the Mushroom Light and Select cards like this. Mushroom Light Preset Card: [Mushroom Light Presets] type: custom:stack-in-card cards: - type: custom:mushroom-light-card entity: light.led_matrix show_brightness_control: true use_light_color: true show_color_control: true card_mod: style: | ha-card { --ha-card-border-width: 0; } - type: custom:mushroom-select-card entity: select.led_matrix_preset icon_type: none …

[Dibbler (Thomas Bail)]

@rhysb Thanks that gave me the hint. Instead of using the grid i used the horizontal-stack. Changing that to grid does the trick.

Thanks a lot

[SPESINO]

Good morning everyone. First of all, it’s a great thread and I love reading it every day. I have little knowledge of HA, and I wanted to ask some questions about a card I made but I can’t modify it. It’s about the Alarm card. Here are my questions: 1. Could you change the color of the blue icon? I know that later it turns green when putting it together but that doesn’t matter to me. 2. The home arm icon is not visible because of the background image and the primary and secondary text is black. Can I modify it? 3. Below are 5 scenes of opening shutters/garage. They are conventional chips. I want to put a circle of color according to state, and the arrows that accompany it that are label: name, I wanted them to be located where they are. I hope I have explained myself well. Thanks for everything.
THE CODE:

layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  column-gap: 0px
  row-gap: 0px
  grid-template-areas: |
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    "10"
    "11"
    "12"
cards:
  - type: custom:mushroom-alarm-control-panel-card
    entity: alarm_control_panel.partition_area_1
    states:
      - armed_away
    name: BWHOUSE
    icon: mdi:shield-home
    layout: horizontal
    view_layout:
      grid_areas: 1
    card_mod:
      style: |
        :host([dark-mode]) {
          --ha-card-background: #073642;
          --mush-icon-size: 50px;
            height: 113px;
        }
        ha-card {
          border-radius: 10px 10px 10px 10px;
          --primary-text-color: rgb(var(--rgb-black));
          --secondary-text-color: rgb(var(--rgb-black));
          --control-height: 40px;
          --control-top: 16px;
          --control-border-radius: 5px;
          --control-border-spacing: 2px;
          --card-primary-font-size: 17px;
            icon-size: 50px;
            background: url('/local/fondo/logon.png'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
            background-size: 80% auto, cover;
            background-position: right;
            background-repeat: no-repeat;
            background-blend-mode: saturation;
        }
        mushroom-shape-icon$: |
          .shape {
            --icon-animation: beat 1.3s ease-out infinite both;
            transform-origin: 50% 70%;
          }
          @keyframes beat {
            0% { transform: scale(1); }
            10% { transform: scale(1.1); }
            17% { transform: scale(1.05); }
            33% { transform: scale(1.45); }
            60% { transform: scale(1); }
          }
        .: |
          ha-card {
            box-shadow: none;
            background: none;
            background-color: rgba(0,0,0,0);
            border: 0px;              
            }      
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: scene.bajar_persianas
            tap_action:
              action: toggle
            icon: mdi:window-shutter
            name: ↓
            use_entity_picture: false
            content_info: name
          - type: entity
            entity: scene.pausar_persianas
            tap_action:
              action: toggle
            content_info: name
            icon: mdi:window-shutter-alert
            name: ' ⇄'
          - type: entity
            entity: scene.subir_persianas
            tap_action:
              action: toggle
            name: ↑
            content_info: name
            icon: mdi:window-shutter-open
          - type: entity
            entity: cover.puerta_del_garaje_door
            tap_action:
              action: toggle
            name: ↑
            content_info: name
            icon: mdi:garage-open-variant
          - type: entity
            entity: cover.puerta_del_garaje_door
            tap_action:
              action: toggle
            name: ↓
            icon: mdi:garage-variant
            content_info: name
        alignment: justify
        card_mod:
          style: |
            ha-card {
            border-radius: 0px 0px 10px 10px;
            margin-top: -14px;
            --chip-font-size: 0.3em;
            --chip-icon-size: 0.5em;
            --chip-border-width: 0;
            --chip-box-shadow: none;
            --chip-background: none;
            --chip-border: none;
            --chip-font-weight: normal;
            --chip-aling-content: justify;
            }
    view_layout:
      grid-column: 1
      grid-row: 3
    card_mod:
      style: |
        ha-card {
          height: 40px;
          margin-top: -14px;
          border-radius: 0px 0px 10px 10px;
          --ha-card-background: none;
        }

type or paste code here