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

Share your Projects!
,
6412

Title and entity:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Study
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-template-card
        primary: Bens PC
        secondary: |-
          {{ states((entity)) | title }}  {% if is_state((entity), 'on') %}
            {% if (now() - states('sensor.winterfell_lastactive')|as_datetime).total_seconds() < 10 %}
              - Active
            {% else %}
             - Inactive
            {% endif %}    
          {% endif %}
        icon: mdi:microsoft-windows
        icon_color: |-
          {% if is_state((entity), 'off') %}
           disabled
          {% else %}
           blue
          {% endif %}
        badge_icon: >-
          {% if (now() -
          states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
          10 %}
            mdi:run
          {% else %}
              ''
          {% endif %}
        badge_color: >-
          {% if (now() -
          states('sensor.winterfell_lastactive')|as_datetime).total_seconds() <
          10 %}
            green
          {% else %}
            ''
          {% endif %}
        entity: switch.winterfell
        card_mod:
          style: |
            ha-card {
              --ha-card-border-width: 0;
            }
            ha-card:active {
              background: rgba(var(--rgb-disabled), 0.1);
              transform: scale(0.985);
              transition: 0s;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: button.winterfell_lock
            icon_color: white
            icon: mdi:lock
            content_info: none
            tap_action:
              action: call-service
              service: button.press
              target:
                entity_id: button.winterfell_lock
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_sleep
            icon_color: white
            icon: mdi:power-sleep
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Sleep?
              service: button.press
              target:
                entity_id: button.winterfell_sleep
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_restart
            icon_color: white
            icon: mdi:restart
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Restart?
              service: button.press
              target:
                entity_id: button.winterfell_restart
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
          - type: entity
            entity: button.winterfell_shutdown
            icon_color: white
            icon: mdi:power
            content_info: none
            tap_action:
              action: call-service
              confirmation:
                text: Are you sure you want to Shutdown?
              service: button.press
              target:
                entity_id: button.winterfell_shutdown
            card_mod:
              style: |
                ha-card {
                  --chip-background: rgba(var(--rgb-primary-text-color), 0.05);
                  --chip-border-width: 0;
                  --icon-color: rgb(var(--rgb-white));
                }
        card_mod:
          style: |
            ha-card {
                --chip-box-shadow: none;
                top: 16px;
                width: -webkit-fill-available;
                right: 12px;
                position: absolute;
            } 
            .chip-container {
                right: 0px;
                position: absolute;
            }

CPU/RAM/GPU:

type: conditional
conditions:
  - entity: sensor.winterfell_cpuload
    state_not: unavailable
card:
  type: vertical-stack
  cards:
    - type: grid
      square: false
      columns: 3
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_cpuload
                  color: rgb(76, 175, 80)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_cpuload
              primary_info: name
              secondary_info: state
              name: Core
              icon: mdi:cpu-64-bit
              icon_color: green
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_memoryusage
                  color: rgb(33, 150, 243)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_memoryusage
              primary_info: name
              secondary_info: state
              name: Memory
              icon_color: blue
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }
        - type: custom:stack-in-card
          cards:
            - type: custom:apexcharts-card
              chart_type: radialBar
              series:
                - entity: sensor.winterfell_gpuload
                  color: rgb(233, 30, 99)
                  max: 100
                  show:
                    legend_value: false
              apex_config:
                plotOptions:
                  radialBar:
                    offsetY: 0
                    startAngle: -108
                    endAngle: 108
                    hollow:
                      size: 65%
                    dataLabels:
                      name:
                        show: false
                      value:
                        show: false
                    track:
                      strokeWidth: 80%
                      margin: 0
                legend:
                  show: false
                chart:
                  height: 170px
              card_mod:
                style: |
                  ha-card {
                    --ha-card-border-width: 0;
                  }
            - type: custom:mushroom-entity-card
              entity: sensor.winterfell_gpuload
              primary_info: name
              secondary_info: state
              name: GPU
              icon: mdi:expansion-card
              icon_color: pink
              layout: vertical
              tap_action:
                action: more-info
              hold_action:
                action: more-info
              double_tap_action:
                action: more-info
              card_mod:
                style: |
                  ha-card {
                    top: -63px;
                    --ha-card-border-width: 0;
                  }
          card_mod:
            style: |
              ha-card {
                height: 158px;
              }

Harddrives:

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: sensor.winterfell_cpuload
        state_not: unavailable
    card:
      type: custom:stack-in-card
      mode: horizontal
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:sd
          icon_color: red
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: C Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_c
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                    background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                  }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }
        - type: custom:mushroom-template-card
          icon: mdi:harddisk
          icon_color: teal
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: D Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_d
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }
        - type: custom:mushroom-template-card
          icon: mdi:harddisk
          icon_color: orange
          layout: vertical
          tap_action:
            action: more-info
          hold_action:
            action: none
          double_tap_action:
            action: none
          primary: E Drive
          secondary: '{{ state_attr((entity), ''UsedSpacePercentage'') }} %'
          multiline_secondary: false
          entity: sensor.winterfell_storage_e
          card_mod:
            style:
              mushroom-shape-icon$: |
                .shape {
                  background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'UsedSpacePercentage')) }}% 0%, var(--card-background-color) 0% 100%);
                }
                .shape:after {
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  border-radius: var(--icon-border-radius);
                  background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
                }
              .: |
                ha-card {
                  --ha-card-border-width: 0;
                }
6413

Font: SF Pro
Theme: Noctis

6414

Just put the --icon-animation command in a condition:

card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        {{ '--icon-animation: charge 3s steps(1) infinite;' if is_state(config.entity, 'charging') }}
      }
      @keyframes charge {
        0% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
        20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
        40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
        60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
      }
6415

Yes. All good

1 Like
6416

What you are using for shutdown restart sleep and lock? HASS Agent?

6417

not an oven although you could try the same idea as this Post where they’d taken an image of the washing machine and over laid the controls and info

6418

Yep, HASS.Agent

6419

Part 3 of my manual is also finished.

You can find 12 Useful automation ideas and how to text on this page :

So 1 manual is left before I finsh my Modern Dashboard.

2 Likes
6420

:eagle: :arrow_lower_right: —→ cimbom :medal_sports:

1 Like
6421

Hello @rhysb , I have a question how to fix these borders on the cards?

1681103623560
16811036235601220×788 138 KB

6422

Thank you so much, you are the best!

1 Like
6423

Can I somehow get Mushroom cards to use CSS attributes as icon color? I have a theme that changes drasticly depending on if its a dark och light theme

6424

Thanks very much. Sorry, does this go into my card template or into config yaml?

1 Like
6425

It can go in your Template Card/Chip or wherever else a template can be used.

type: custom:mushroom-template-card
primary: '{{ now().strftime("%A, %-d %B %Y") }}'
icon: mdi:clock
icon_color: blue
6426

@rhysb Any idea why this is not working with a custom:button-card? The goal is to convert your motion sensor animation to a button card because i’m not using Mushroom.

type: custom:button-card
icon: mdi:motion-sensor
name: Motion test
styles:
  img_cell:
    - animation: motion 2s linear infinite
  icon:
    - color: var(--blue-color)
    - animation: clip 2s linear infinite
    - transform-origin: 50% 85%
    - height: 36px
    - width: 36px
    - padding: 8px
    - background-color: "rgba(var(--color-blue),0.2)"
    - border-radius: 50%
extra_styles: |
  @keyframes clip {
    50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
  }
  @keyframes motion {
    0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); }
    50% { --shape-color: rgba(var(--rgb-blue), 0.2); }
  }
6427

hello is there any way to reduce the transparency behind the icon ?

Sem título

6428

Not sure how? I can’t replace the icon with the code. It just goes blank?

{% set state=states(entity) %}
{% if state =='readyForCharging' %}
mdi:ev-station
{% elif state =='charging' %}
mdi:battery-alert
{% elif state =='notReadyForCharging' %}
mdi:battery-alert
{% else %}
mdi:battery-high
{% endif %}
6430

Anyway to use the Media player card with entity-filter?

6431

did you solved it?
I have the same problem just with bond.
I made a shell command which i want to connect to the oscillating button.

6432

Post your full card so we can see what you are doing.