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

[Radeaus (Quinten)]

@weppa

icon-color: rgb(var(--rgb-white));

Many thanks!!

[Mariusthvdb (Marius)]

@cretzu8523

background-blend-mode: lighten;

Never used that myself, and it’s nice! but, shouldn’t you be using background-blend-mode: darken when in dark mode …
see: CSS background-blend-mode property

[injectx]

For the love of god I cannot seem to get this “Goedemiddag, Roger” text to turn bold:

      - type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %}
          {% if (time >= 18) %} 
           Goedenavond, {{user}}!
          {% elif (time >= 12) %}
           Goedemiddag, {{user}}!
          {% elif (time >= 5) %}
           Goedemorgen, {{user}}!
          {% else %}
           Hello, {{user}}
          {% endif %}
        subtitle: ''
        card_mod:
          style: |
            ha-card { 
              margin-right: 0px;
            }
            .title {
              font-size: 24px !important;
              font-weight: bold !important;
            }

[jgosnell]

Hi All,
I need help changing the icon color of individual entities for chip cards based on state. I have 4 chips nested in a vertical-stack card. I can get them all to change color when one of the four states is “on”, but I want the individual chip to change color when on and not all four. Can someone help me out with the code?

Attempt at individual chip change and does not work.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Sprinklers
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.flowerbeds
        icon: mdi:sprinkler
        name: Flower Beds
        content_info: name
        card_mod:
          style: |
            ha-card {
              {% if states('switch.flowerbeds') == 'on' %}
                --card-mod-icon-color: green;
              {% endif %}
              }
      - type: entity
        entity: switch.frontyard
        icon: mdi:sprinkler
        name: Front yard
        content_info: name
      - type: entity
        entity: switch.backyard
        icon: mdi:sprinkler
        name: Backyard
        content_info: name
      - type: entity
        entity: switch.sideyard
        name: Side yard
        content_info: name
        icon: mdi:sprinkler

This way turns all green even if a single chip (entity) is on.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Sprinklers
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: switch.flowerbeds
        icon: mdi:sprinkler
        name: Flower Beds
        content_info: name
      - type: entity
        entity: switch.frontyard
        icon: mdi:sprinkler
        name: Front yard
        content_info: name
      - type: entity
        entity: switch.backyard
        icon: mdi:sprinkler
        name: Backyard
        content_info: name
      - type: entity
        entity: switch.sideyard
        name: Side yard
        content_info: name
        icon: mdi:sprinkler
    card_mod:
      style: |
        ha-card {
          {% if states('switch.flowerbeds') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.frontyard') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.backyard') == 'on' %}
            --card-mod-icon-color: green;
          {% elif states('switch.sideyard') == 'on' %}
            --card-mod-icon-color: green;
          {% endif %}
        }

[cretzu8523 (8523tiberiu)]

thank you for your answer, i used the darken mode baut i need to change that automaticaly.

[rhysb (Rhys)]

The better one to use is background-blend-mode: saturation. This will work with both dark and light modes.

[rhysb (Rhys)]

The Mushroom Title card does not have any ha-card. You will need to use mod-card:

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

If anyone needs to modify the Mushroom Title card, it can be done with card_mod like this: [Mushroom Title Card] 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)); …

[rhysb (Rhys)]

The Mushroom colors are defined as HEX values in HA like this --[color]-color:

--disabled-color
--red-color
--pink-color
--purple-color
--deep-purple-color
--indigo-color
--blue-color
--light-blue-color
--cyan-color
--teal-color
--green-color
--light-green-color
--lime-color
--yellow-color
--amber-color
--orange-color
--deep-orange-color
--brown-color
--light-grey-color
--grey-color
--dark-grey-color
--blue-grey-color
--black-color
--white-color

These can be used with most cards using var() like this var(--pink-color).

The --rgb-[color] values can only be used with a Mushroom card.

[Mariusthvdb (Marius)]

@cretzu8523

card_mod:
style: |
{%if is_state(‘light.salon’,‘on’)%}
ha-card {
height: 100px !important;
border: solid #B8860B;
box-shadow: 0px 0px 9px 1px #DAA520;
background-image: url(’/local/sufragerie1.jpg’),linear-gradient(to left, transparent, rgba(var(–rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
–primary-text-color: #DAA520;
–secondary-text-color: #447FA6;
–card-primary-font-size: 20px;
–card-secondary-font-size: 11px
}
{% else %}
ha-card {
height: 100px !important;
border: solid #A9A9A9;
box-shadow: 0px 0px 9px 1px #808080;
background-image: url(’/local/sufragerie1.jpg’),linear-gradient(to left, transparent, rgba(var(–rgb-card-background-color)) 50% );
background-size: 50%, 100%;
background-color: rgba(0, 0, 0, 0.1);
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
–primary-text-color: #447FA6;
–secondary-text-color: #447FA6;
–card-primary-font-size: 20px;
–card-secondary-font-size: 11px

}
{%endif%}

btw, can you post the rest of the card config itself? I dont use these cards yet, and could use a head start

[maniac365]

I am trying to your album art with node-red but I am getting this error, I use echo dot as my speaker, have universal media player running, do you know why that field is empty?

[rhysb (Rhys)]

Add a debug node and see what the function node is outputting.

[injectx]

It works, thanks a lot!

[Noah]

Is it possible with the Mushroom Media player card to overwrite the entity image and also when using media infos, in certain cases with a template to overwrite the display text for priamary information?

[S1M8N]

Hello everyone,

I have this code

type: custom:mushroom-template-card
primary: Ventilateur
secondary: ''
icon: mdi:fan
entity: switch.relais_ventilateur_buanderie
icon_color: green
card_mod:
  style: |
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    mushroom-shape-icon {
      box-shadow: 0px 0px;
      animation: rotation linear infinite;
      animation-duration: 3s;
      {% if is_state(config.entity, 'on') %}
       animation-duration: 3s;
      {%- endif %}

and I can’t make work fan rotation…

do you have an idea how can I change that to make work

thanks in advance

[Robbi-Ho (Rob)]

Take a look at this code from @rhysb:

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: teal
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: spin 1s linear infinite;
      }

Found here: Mushroom Cards - Build a beautiful dashboard easily 🍄

[Boostin4HP]

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Front Door
    secondary: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Open and Unlocked
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        Door Open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.door_lock_2','unlocked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','on')
      %}
        mdi:door-open
      {% elif is_state('lock.door_lock_2','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off')
      %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |-
      {% set bl = states('sensor.front_door_sensor_battery_level') | int %}
      {% if bl < 10 %} mdi:battery-outline
      {% elif bl < 20 %} mdi:battery-10
      {% elif bl < 30 %} mdi:battery-20
      {% elif bl < 40 %} mdi:battery-30
      {% elif bl < 50 %} mdi:battery-40
      {% elif bl < 60 %} mdi:battery-50
      {% elif bl < 70 %} mdi:battery-60
      {% elif bl < 80 %} mdi:battery-70
      {% elif bl < 90 %} mdi:battery-80
      {% elif bl < 100 %} mdi:battery-90
      {% elif bl == 100 %} mdi:battery
      {% else %} mdi:battery-unknown
      {% endif %}
    badge_color: |-
      {% set bl = states('sensor.front_door_sensor_battery_level') | int %}
      {% if bl < 10 %} red
      {% elif bl < 20 %} red
      {% elif bl < 30 %} red
      {% elif bl < 40 %} orange
      {% elif bl < 50 %} orange
      {% elif bl < 60 %} green
      {% elif bl < 70 %} green
      {% elif bl < 80 %} green
      {% elif bl < 90 %} green
      {% elif bl < 100 %} green
      {% elif bl == 100 %} green
      {% else %} disabled
      {% endif %}
    tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          left: -3px;
        }
  - type: grid
    square: false
    columns: 2
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:lock-smart
        badge_icon: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} mdi:battery-outline
          {% elif bl < 20 %} mdi:battery-10
          {% elif bl < 30 %} mdi:battery-20
          {% elif bl < 40 %} mdi:battery-30
          {% elif bl < 50 %} mdi:battery-40
          {% elif bl < 60 %} mdi:battery-50
          {% elif bl < 70 %} mdi:battery-60
          {% elif bl < 80 %} mdi:battery-70
          {% elif bl < 90 %} mdi:battery-80
          {% elif bl < 100 %} mdi:battery-90
          {% elif bl == 100 %} mdi:battery
          {% else %} mdi:battery-unknown
          {% endif %}
        badge_color: |-
          {% set bl = states('sensor.door_lock_battery_level_2') | int %}
          {% if bl < 10 %} red
          {% elif bl < 20 %} red
          {% elif bl < 30 %} red
          {% elif bl < 40 %} orange
          {% elif bl < 50 %} orange
          {% elif bl < 60 %} green
          {% elif bl < 70 %} green
          {% elif bl < 80 %} green
          {% elif bl < 90 %} green
          {% elif bl < 100 %} green
          {% elif bl == 100 %} green
          {% else %} disabled
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: keypad-front_door
        card_mod:
          style: |
            mushroom-badge-icon {
              left: -3px;
            }
            ha-card {
              margin-top: -12px;
              --icon-border-radius: 12px;
            }
            mushroom-shape-icon {
              --icon-color: #e1e1e1 !important;
            }
      - type: custom:mushroom-lock-card
        entity: lock.door_lock_2
        name: Front Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            ha-card {
              margin-top: -12px;
              margin-left: -52px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.door_lock_2','locked') and
      is_state('binary_sensor.front_door_sensor_access_control_window_door_is_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

[S1M8N]

Thank you so much for you quick reply,

I have change like that and work perfectly :

          type: custom:mushroom-template-card
          primary: Ventilateur
          secondary: ''
          icon: mdi:fan
          entity: switch.relais_ventilateur_buanderie
          icon_color: green
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-icon {
                {% if is_state(config.entity, 'on') %}
                 --icon-animation: spin 1s linear infinite;
                {%- endif %}
                }

[S1M8N]

I think you can try to simplifie the code like this :

{% set bl = states('sensor.door_lock_battery_level_2') | int %}
{% set level = (bl // 10) * 10 %}
{% set icon = 'mdi:battery' if level == 100 else 'mdi:battery-' ~ level %}
{% if bl > 100 or bl < 0 %} mdi:battery-unknown
{% else %} {{ icon }}
{% endif %}

This version uses the integer division operator // to determine the battery level in increments of 10

If it works well, let me know

[hal2000 (Dan)]

I have the following code which causes the fan icon to pulse when on. How can I make it also rotate?

    mushroom-template-chip:nth-child(3)$: |
      ha-icon {
        {{ 'animation: beat 1.3s ease-out infinite both;' if is_state('switch.ensuite_extractor_fan_power_outlet', 'on') }}
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.75); }
        60% { transform: scale(1); }
      }

[rhysb (Rhys)]

Try like this:

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
  - type: template
    icon: mdi:mushroom
    icon_color: red
    card_mod:
      style: |
        .content {
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          100% { transform: rotate(360deg); }
        } 
card_mod:
  style:
    mushroom-template-chip:nth-child(3)$: | 
      ha-icon {
        animation: beat 1.3s ease-out infinite both;
        transform-origin: 50% 60%;
      }
      @keyframes beat {
        0% { transform: scale(1); }
        10% { transform: scale(1.1); }
        17% { transform: scale(1.05); }
        33% { transform: scale(1.75); }
        60% { transform: scale(1); }
      }