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

[Still_ill]

WLED control card

In this community post, I introduce a comprehensive Home Assistant configuration that enhances my lighting control and makes my WLED lighting more efficient. I will explain the code and the functions of each card step by step.

I also use the WLED Strip in this example as an Ambielight for my TV via Hyperion.ng. When I operate it in normal mode, I would like to have 2 different colours displayed, as it is aesthetically more appealing. Therefore it is divided into 2 segments (right and left). This map is based on this. You can of course adapt it to your liking. I hope you find a good use for it

Let’s dive in and discover how these cards optimize my lighting choices. Whether I’m a Home Assistant pro or just starting out, this post offers valuable insights to enhance my smart home experience.

1. Title Card:

This card is a custom title card that displays “AMBIELIGHT” as the title in the center of the card. It doesn’t have any tap actions.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: A  M  B  I  E  L  I  G  H  T
    subtitle: ''
    alignment: center
    title_tap_action:
      action: none

2. Chips Card:

All of these chips are aligned in the center of the card. The chips provide quick access to various functions and information related to your WLED setup, making it a convenient control panel for your lighting system. The different icons and colors help to distinguish the chips and make them visually appealing.

1. Arrow Left Chip:

• Icon: mdi:arrow-left
• Icon Color: Cyan
• Action: When tapped, it opens a URL to the device configuration page within Home Assistant.

2. Uptime Chip:

• Entity: sensor.wledambie_uptime
• Icon Color: Red
• Content Info: Displays the state of the sensor.wledambie_uptime entity.

3. Wi-Fi Signal Chip:

• Entity: sensor.wledambie_wi_fi_signal
• Icon Color: Green
• Content Info: Displays the state of the sensor.wledambie_wi_fi_signal entity.

4. Estimated Current Chip:

• Entity: sensor.wledambie_estimated_current
• Icon: mdi:flash-triangle-outline
• Icon Color: Yellow
• Content Info: Displays the state of the sensor.wledambie_estimated_current entity.

5. Arrow Right Chip:

• Icon: mdi:arrow-right
• Icon Color: Cyan
• Action: When tapped, it opens a URL to http://192.168.0.17/.

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-left
        tap_action:
          action: url
          url_path: >-
            http://homeassistant.local:8123/config/devices/device/df8f160715eed439b5dd3e4cf60277fb
        icon_color: cyan
      - type: entity
        entity: sensor.wledambie_uptime
        icon_color: red
        content_info: state
      - type: entity
        entity: sensor.wledambie_wi_fi_signal
        icon_color: green
      - type: entity
        entity: sensor.wledambie_estimated_current
        icon: mdi:flash-triangle-outline
        icon_color: yellow
      - type: template
        icon: mdi:arrow-right
        tap_action:
          action: url
          url_path: http://192.168.0.17/
        icon_color: cyan
    alignment: center

3. Conditional Card:

This is a conditional card that displays an iframe if the master light (light.wledambie_master) is turned on. The iframe displays a live view from the device URL.

  - type: conditional
    conditions:
      - entity: light.wledambie_master
        state: 'on'
    card:
      type: iframe
      url: http://192.168.0.17/liveview
      aspect_ratio: 5%
      title: null

4. Grid of Template Cards:
[/wrap]

This part of the card is a grid that contains a set of custom template cards for controlling the master light.

Cards:

• Power Control Card:
  • Icon: mdi:power
  • Icon Color: Green
  • Layout: Vertical
  • Entity: light.wledambie_master
  • Action: Toggles the ‘light.wledambie_master’ and targets ‘light.wledambie_links’ and ‘light.wledambie_rechts’. It uses an animation to pulse the icon based on the state of ‘light.wledambie_rechts’.
• Sync sent Card:
  • Icon: mdi:upload-network-outline
  • Icon Color: Pink
  • Layout: Vertical
  • Entity: switch.wledambie_sync_send
  • Action: Toggles the ‘switch.wledambie_sync_send’ and uses an animation to pulse the icon based on the switch state.
• Sync Recieve Card:
  • Icon: mdi:download-network
  • Icon Color: Purple
  • Layout: Vertical
  • Entity: switch.wledambie_sync_receive
  • Action: Toggles the ‘switch.wledambie_sync_receive’ and uses an animation to pulse the icon based on the switch state.
• TV Ambient Light Card:
  • Icon: mdi:television-ambient-light
  • Icon Color: Orange
  • Layout: Vertical
  • Entity: light.hyph_ambie_tv
  • Action: Toggles the ‘light.hyph_ambie_tv’ and uses an animation to pulse the icon based on the light state.
• Smoothening Card:
  • Icon: mdi:waveform
  • Icon Color: Turquoise
  • Layout: Vertical
  • Entity: switch.hyph_ambie_tv_component_smoothing
  • Action: Toggles the ‘switch.hyph_ambie_tv_component_smoothing’ in Hyperion and uses an animation to pulse the icon based on the switch state.
• Restart Card:
  • Icon: mdi:restart
  • Icon Color: Red
  • Layout: Vertical
  • Entity: button.wledambie_restart
  • Action: Restarts the device

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:power
    icon_color: green
    layout: vertical
    secondary: ''
    entity: light.wledambie_master
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id:
          - light.wledambie_links
          - light.wledambie_rechts
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('light.wledambie_rechts', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:upload-network-outline
    icon_color: '#FF69B4'
    layout: vertical
    secondary: ''
    entity: switch.wledambie_sync_send
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_sync_send
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.wledambie_sync_send', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:download-network
    icon_color: '#800080'
    layout: vertical
    secondary: ''
    entity: switch.wledambie_sync_receive
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_sync_receive
      data: {}
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.wledambie_sync_receive', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:television-ambient-light
    icon_color: '#FFA500'
    layout: vertical
    secondary: ''
    entity: light.hyph_ambie_tv
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.hyph_ambie_tv
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('light.hyph_ambie_tv', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:waveform
    icon_color: '#40E0D0'
    layout: vertical
    secondary: ''
    entity: switch.hyph_ambie_tv_component_smoothing
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.hyph_ambie_tv_component_smoothing
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
  - type: custom:mushroom-template-card
    primary: ''
    icon: mdi:restart
    icon_color: red
    layout: vertical
    secondary: ''
    entity: button.wledambie_restart
    tap_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.wledambie_restart
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
          }
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.5;
            }
            100% {
              transform: scale(1);
              opacity: 1;
            }
          }
columns: 6

5 Segment Entities Card:

Folded

Unfolded

This card is designed to control the brightness of two light segments. It allows you to adjust the brightness of the specified light entities within a foldable row.

type: entities
entities:
  type: custom:fold-entity-row
  head:
    type: custom:mushroom-light-card
    entity: light.wledambie_master
    layout: horizontal
    primary_info: none
    secondary_info: none
    show_brightness_control: true
    collapsible_controls: true
    icon_type: none
    use_light_color: true
  entities:
    type: custom:mushroom-light-card
    entity: light.wledambie_links
    use_light_color: true
    show_brightness_control: true
    primary_info: none
    secondary_info: none
    layout: horizontal
    collapsible_controls: true
    icon_type: entity-picture
    type: custom:mushroom-light-card
    entity: light.wledambie_rechts
    use_light_color: true
    show_brightness_control: true
    primary_info: none
    secondary_info: none
    layout: horizontal
    collapsible_controls: true
    icon_type: entity-picture
show_header_toggle: true

6. Grid of Light Cards

This grid contains custom light cards for controlling the ‘light.wledambie_links’ and 'light.wledambie_rechts

• Type: Grid
• Columns: 2
• Cards:
  • Links Light Card: A custom card for controlling the ‘light.wledambie_links’.
    • Icon: mdi:arrow-collapse-left
    • Icon Color: Varies based on the RGB color of the entity.
  • Rechts Light Card: A custom card for controlling the ‘light.wledambie_rechts’.
    • Icon: mdi:arrow-collapse-right
    • Icon Color: Varies based on the RGB color of the entity.

square: false
type: grid
cards:
  type: custom:mushroom-light-card
  entity: light.wledambie_links
  icon: mdi:arrow-collapse-left
  use_light_color: true
  primary_info: none
  secondary_info: none
  show_brightness_control: false
  name: Links
  layout: vertical
  collapsible_controls: true
  card_mod:
    style: |
      ha-card {
        {% set r = state_attr(config.entity, 'rgb_color')[0] %}
        {% set g = state_attr(config.entity, 'rgb_color')[1] %}
        {% set b = state_attr(config.entity, 'rgb_color')[2] %}
        background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
      }
  type: custom:mushroom-light-card
  entity: light.wledambie_rechts
  icon: mdi:arrow-collapse-right
  use_light_color: true
  primary_info: none
  secondary_info: none
  show_brightness_control: false
  layout: vertical
  name: Rechts
  collapsible_controls: true
  fill_container: false
  card_mod:
    style: |
      ha-card {
        {% set r = state_attr(config.entity, 'rgb_color')[0] %}
        {% set g = state_attr(config.entity, 'rgb_color')[1] %}
        {% set b = state_attr(config.entity, 'rgb_color')[2] %}
        background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
      }
columns: 2

7. Horizontal Stack with Select Cards:

This horizontal stack contains two custom select cards for choosing color palettes and presets

• Type: Horizontal Stack
• Cards:
  • Color Palette Select Card:
    • Entity: select.wledambie_color_palette
  • Preset Select Card:
    • Entity: select.wledambie_preset

type: horizontal-stack
cards:
  type: custom:mushroom-select-card
  entity: select.wledambie_color_palette
  primary_info: none
  icon_color: deep-purple
  secondary_info: none
  layout: horizontal
  type: custom:mushroom-select-card
  entity: select.wledambie_preset
  layout: horizontal
  primary_info: none
  secondary_info: none

8. Grid of Number Cards:

This grid contains two custom number cards for adjusting intensity and speed

• Type: Grid
• Columns: 1
• Cards:
  • Intensity Number Card:
    • Entity: number.wledambie_intensity
  • Speed Number Card:
    • Entity: number.wledambie_speed

square: false
type: grid
cards:
  type: custom:mushroom-number-card
  entity: number.wledambie_intensity
  primary_info: none
  fill_container: false
  display_mode: slider
  layout: horizontal
  secondary_info: none
  icon_color: orange
  type: custom:mushroom-number-card
  entity: number.wledambie_speed
  layout: horizontal
  secondary_info: none
  primary_info: none
  icon_color: deep-orange
columns: 1

This configuration has taken my smart home experience to a new level, and I hope it provides valuable inspiration for all of you.

PS:Here is the entire code to copy and use in the lovelace interface

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: A  M  B  I  E  L  I  G  H  T
    subtitle: ''
    alignment: center
    title_tap_action:
      action: none
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        icon: mdi:arrow-left
        tap_action:
          action: url
          url_path: >-
            http://homeassistant.local:8123/config/devices/device/df8f160715eed439b5dd3e4cf60277fb
        icon_color: cyan
      - type: entity
        entity: sensor.wledambie_uptime
        icon_color: red
        content_info: state
      - type: entity
        entity: sensor.wledambie_wi_fi_signal
        icon_color: green
      - type: entity
        entity: sensor.wledambie_estimated_current
        icon: mdi:flash-triangle-outline
        icon_color: yellow
      - type: template
        icon: mdi:arrow-right
        tap_action:
          action: url
          url_path: http://192.168.0.17/
        icon_color: cyan
    alignment: center
  - type: conditional
    conditions:
      - entity: light.wledambie_master
        state: 'on'
    card:
      type: iframe
      url: http://192.168.0.17/liveview
      aspect_ratio: 5%
      title: null
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:power
        icon_color: green
        layout: vertical
        secondary: ''
        entity: light.wledambie_master
        tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id:
              - light.wledambie_links
              - light.wledambie_rechts
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('light.wledambie_rechts', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:upload-network-outline
        icon_color: '#FF69B4'
        layout: vertical
        secondary: ''
        entity: switch.wledambie_sync_send
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_sync_send
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.wledambie_sync_send', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:download-network
        icon_color: '#800080'
        layout: vertical
        secondary: ''
        entity: switch.wledambie_sync_receive
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_sync_receive
          data: {}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.wledambie_sync_receive', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:television-ambient-light
        icon_color: '#FFA500'
        layout: vertical
        secondary: ''
        entity: light.hyph_ambie_tv
        tap_action:
          action: call-service
          service: light.toggle
          target:
            entity_id: light.hyph_ambie_tv
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('light.hyph_ambie_tv', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:waveform
        icon_color: '#40E0D0'
        layout: vertical
        secondary: ''
        entity: switch.hyph_ambie_tv_component_smoothing
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.hyph_ambie_tv_component_smoothing
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: {% if is_state('switch.hyph_ambie_tv_component_smoothing', 'on') %}pulse 3s infinite{% else %}none{% endif %};
              }
              @keyframes pulse {
                0% {
                  transform: scale(1);
                  opacity: 1;
                }
                50% {
                  transform: scale(1.2);
                  opacity: 0.5;
                }
                100% {
                  transform: scale(1);
                  opacity: 1;
                }
              }
      - type: custom:mushroom-template-card
        primary: ''
        icon: mdi:restart
        icon_color: red
        layout: vertical
        secondary: ''
        entity: button.wledambie_restart
        tap_action:
          action: call-service
          service: switch.toggle
          target:
            entity_id: switch.wledambie_restart
    columns: 6
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: custom:mushroom-light-card
          entity: light.wledambie_master
          layout: horizontal
          primary_info: none
          secondary_info: none
          show_brightness_control: true
          collapsible_controls: true
          icon_type: none
          use_light_color: true
        entities:
          - type: custom:mushroom-light-card
            entity: light.wledambie_links
            use_light_color: true
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            layout: horizontal
            collapsible_controls: true
            icon_type: entity-picture
          - type: custom:mushroom-light-card
            entity: light.wledambie_rechts
            use_light_color: true
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            layout: horizontal
            collapsible_controls: true
            icon_type: entity-picture
    show_header_toggle: true
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.wledambie_links
        icon: mdi:arrow-collapse-left
        use_light_color: true
        primary_info: none
        secondary_info: none
        show_brightness_control: false
        name: Links
        layout: vertical
        collapsible_controls: true
        card_mod:
          style: |
            ha-card {
              {% set r = state_attr(config.entity, 'rgb_color')[0] %}
              {% set g = state_attr(config.entity, 'rgb_color')[1] %}
              {% set b = state_attr(config.entity, 'rgb_color')[2] %}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
            }
      - type: custom:mushroom-light-card
        entity: light.wledambie_rechts
        icon: mdi:arrow-collapse-right
        use_light_color: true
        primary_info: none
        secondary_info: none
        show_brightness_control: false
        layout: vertical
        name: Rechts
        collapsible_controls: true
        fill_container: false
        card_mod:
          style: |
            ha-card {
              {% set r = state_attr(config.entity, 'rgb_color')[0] %}
              {% set g = state_attr(config.entity, 'rgb_color')[1] %}
              {% set b = state_attr(config.entity, 'rgb_color')[2] %}
              background: rgba( {{r}}, {{g}}, {{b}}, 0.2 );
            }
    columns: 2
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-select-card
        entity: select.wledambie_color_palette
        primary_info: none
        icon_color: deep-purple
        secondary_info: none
        layout: horizontal
      - type: custom:mushroom-select-card
        entity: select.wledambie_preset
        layout: horizontal
        primary_info: none
        secondary_info: none
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-number-card
        entity: number.wledambie_intensity
        primary_info: none
        fill_container: false
        display_mode: slider
        layout: horizontal
        secondary_info: none
        icon_color: orange
      - type: custom:mushroom-number-card
        entity: number.wledambie_speed
        layout: horizontal
        secondary_info: none
        primary_info: none
        icon_color: deep-orange
    columns: 1
view_layout:
  grid-area: left
card_mod:
  style: |
    ha-card {
      background: #1c1c1c;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 25px;
    }
```

[dimitri.landerloos]

I get an error when i turn off and on a wled led strip with segments. How did you get around this?

A bit off topic but if it requires further info than 1 reply can you send me a message please?

[tomg1970]

Oh, I totally misunderstood that. I based the avatars on the ios Messenger avatars and then post-processed them in Gimp.

[edwardtich]

I made a card animation

type: custom:stack-in-card
cards:
  - type: custom:mushroom-chips-card
    chips:
          - type: template
            icon: mdi:power-standby
            icon_color: red
            hold_action:
              action: none
            tap_action:
              confirmation:
                text: Power OFF?
              action: call-service
              service: homeassistant.stop
              service_data: {}
              target: {}
            card_mod:
              style: |
                ha-card {
                  animation: power 1.5s infinite; 
                }
                .shape {
                    --shape-color: none;
                }                  
                @keyframes power {
                  0%, 100% { clip-path: inset(0 0 0 0); }
                  50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
                }

how to animate an icon?

[inganyoyo]

I don’t understand it by looking at some.
Can you share the entire script

[edwardtich]

corrected the card

[Still_ill]

What kind of error? Do you have more information? I have divided the segments as shown in this picture:

[dimitri.landerloos]

I have 2 segments.

Works fine in WLED and actually works in HA, but when i change anything in HA for the segment i get an error like the below:

It does complete the action, but i get the error every time… which gets annoying as i am sure you can imagine.

[Still_ill]

Have you adapted the entities to your device id’s? Check Line1 column 867. That should be where the error is.

[dimitri.landerloos]

how am i supposed to adapt them? they are just named the default:

am i supposed to be changing it to something like this:

[tomg1970]

Kann ich in der Mushroom-Entity-Card den Namen anhand des Status ändern?
Zb. state = on / name = COMFORT

[tvds (Tim)]

Hi, I’m trying to make me some room cards.
Anyone has an idea how I can remove the border of the middle orange mushroom climate card? I don’t succeed in removing it

Code

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: null
    icon_color: blue
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          --ha-card-background: none;
          --ha-card-box-shadow: none;
          --ha-card-border-width: 0;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
                font-size: 14px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
          > 0 %} amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }

Many thanks!

[Still_ill]

Ok, unfortunately I still don’t understand it completely. Do you want to use the entire map? To use the template card to switch on and off, you should not select the segments, but rather the master of the WLED lamp. Here is the Code for turn the device on and off. As you can see, i selected the Master first, then the segments:

type: custom:mushroom-template-card
primary: ''
icon: mdi:power
icon_color: green
layout: vertical
secondary: ''
entity: light.wledambie_master
tap_action:
  action: call-service
  service: light.toggle
  target:
    entity_id:
      - light.wledambie_links
      - light.wledambie_rechts
  data: {}
card_mod:
  style:
    mushroom-shape-icon$: |
      ha-icon {
        --icon-animation: {% if is_state('light.wledambie_rechts', 'on') %}pulse 3s infinite{% else %}none{% endif %};
      }
      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.2);
          opacity: 0.5;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

[AddiXz (Marciano)]

Is it possible to use a variable from the theme as the color for the icons?

If so; how can I do that based on the following?

- type: custom:mushroom-template-card
  icon: mdi:trash-can
  icon_color: >
    {% set type=state_attr('sensor.meerlanden_first_upcoming', "Upcoming_waste_types") %}
    {% if type == 'gft' %}
    var(--green)
    {% elif type == 'pmd' %}
    var(--peach)
    {% elif type == 'restafval' %}
    var(--gray)
    {% endif %}

Or do I HAVE to use card mod for this?
If so, is there a way to utilize if else in card mod?
I would prefer to avoid that route…

[madir]

Hi, where can I find such a card?
I am looking for chip light card which can show the brightness % as a ring around the icon!

[madir]

love the cards, can you please share the code for the thermostat and the light card?
thanks.

[dimitri.landerloos]

Here is an example.

replace the entity with your own light of course.

type: custom:mushroom-chips-card
chips:
  - type: light
    entity: light.office_main_light
    use_light_color: true
    content_info: none
    card_mod:
      style: |
        ha-card {
          background: radial-gradient( var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(var(--icon-color) {{state_attr(config.entity,'brightness') | float / 2.55}}% 0%, var(--card-background-color) 0% 100%) !important;
          width: fit-content;
        }

[dimitri.landerloos]

You HAVE to use card mod for this yes.

mushroom does not accept direct CSS. it accepts things like 255, 255, 255 for white. but not rgb(255, 255, 255). it translates what you have written into CSS.

but it is easily done with card mod like this:

type: custom:mushroom-template-card
icon: mdi:trash-can
card_mod:
  style: |
    mushroom-shape-icon {
      {% set type=state_attr('sensor.meerlanden_first_upcoming', "Upcoming_waste_types") %}
      {% if type == 'gft' %}
        --shape-color: rgba(var(--green), 0.2) !important;
        --icon-color: rgba(var(--green), 1) !important;
      {% elif type == 'pmd' %}
        --shape-color: rgba(var(--peach), 0.2) !important;
        --icon-color: rgba(var(--peach), 1) !important;
      {% elif type == 'restafval' %}
        --shape-color: rgba(var(--gray), 0.2) !important;
        --icon-color: rgba(var(--gray), 1) !important;
      {% endif %}
    }

[dimitri.landerloos]

Here you go

Code

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Woonkamer
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: null
    icon_color: blue
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
          --ha-card-background: none;
          --ha-card-box-shadow: none;
          --ha-card-border-width: 0;
        }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-climate-card
        entity: climate.living
        icon: none
        show_temperature_control: false
        primary_info: none
        secondary_info: none
        layout: horizontal
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
                font-size: 14px;
                font-weight: bolder;
                color: white;
                position: absolute;
              }
              .shape {
                {% set mode = state_attr(config.entity, 'hvac_action') %}
                --shape-color: rgba(var(--rgb-
                {%- if mode == 'heating' -%}
                  orange
                {%- elif mode == 'cooling' -%}
                  blue
                {%- else -%}
                  grey
                {% endif %}));
              }
            mushroom-badge-icon$: |
              .badge {
                {{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
              }
            .: |
              mushroom-badge-icon:after {
                content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-green));
                color: rgb(var(--rgb-white));
                border-radius: 50%;
                border-width: 0;
                top: 0;
                width: 100%;
                height: 100%;
                font-size: 0.7em; 
              }
              ha-card {
                border: none !important;
              }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:lightbulb
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count
          > 0 %} amber {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq' , 'on' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }
      - type: custom:mushroom-template-card
        primary: null
        icon: mdi:window-shutter-open
        icon_color: >-
          {%if  expand(area_entities('woonkamer')) | selectattr ( 'domain' ,
          'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
          count > 0 %} blue {% else %} grey {% endif %}
        entity: light.all_lights
        badge_icon: none
        badge_color: transparent
        card_mod:
          style: |
            mushroom-badge-icon:after {
              content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";         
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              background: rgb(var(--rgb-orange));
              color: var(--card-background-color);
              border-radius: 50%;
              top: 0;
              width: 100%;
              height: 100%;
              font-size: 0.8em; 
            }
            ha-card {
              --ha-card-border-width: 0;  
            }

You could also install a theme that has no border by default, like minimalist. that is what i use, but the above code should work.

[tvds (Tim)]

@dimitri.landerloos

You could also install a theme that has no border by default, like minimalist. that is what i use, but the above code should work.

Good to know. Will give the minimalist theme a look

Your code is working many thanks for your support!
Any idea if adding a mini-graph card is possible at the location of the second_info?
Something like this: