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

[hazio]

No worries. Yes, I have fully cleared cache/data on the browser. It seems to be a WebKit issue more than anything as Safari on Mac is the only one affected.

[RkcCorian]

I know in the meantime how to change the color of the icon via card-mod. Just tried to achieve the same more centrally via a theme. But when I use the following I get only a white icon. Any idea?

I tried with

  mush-rgb-state-cover-open: pink
  mush-rgb-state-cover-closed: orange

but this lead only to a white icon, I do not understand why

[LiQuid_cOOled]

A few questions

1. Are you placing those settings in a new renamed theme file in the themes/mushroom folder ? You have to create your own file. Editing the stock mushroom theme will not work. If yes ensure you are using that theme in your profile.

2. Are you using the mushroom-cover -card? Those settings will not alter a mush room-template-card.

I am assuming yes to both questions and believe your issue is the way you entered the colors. The colors have to match the code like this:

mush-rgb-state-cover-open: var(--mush-rgb-pink)
mush-rgb-state-cover-closed: var(--mush-rgb-orange)

The stock color is blue and when I added green it worked perfect. Don’t forget to do a quick restart.

[Luigi_Peluso]

HI all,

i am working on a mushroom based card for my video survillance . I am having issue ( i think with css ) with a part of the code here an exemple of it, for 3 rooms )

square: false
type: grid
cards:

• type: entities
  entities:
  • type: custom:stack-in-card
    keep:
    margin: false
    box_shadow: false
    background: false
    cards:
    • square: false
      type: grid
      cards:

      • type: custom:mushroom-template-card
        entity: binary_sensor.presenza_terrazzo_salone_presence
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.presenza_terrazzo_salone_presence’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.motion_salone_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: Salone
        icon: >
        {% set motion_state_salone =
        is_state(‘binary_sensor.motion_salone_occupancy’, ‘on’) %} {%
        set all_occupancy_state_salone =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        not motion_state_salone and not all_occupancy_state_salone %}
        mdi:sofa-outline
        {% elif not motion_state_salone and all_occupancy_state_salone
        %}
        mdi:cctv
        {% elif motion_state_salone and all_occupancy_state_salone %}
        mdi:security
        {% elif motion_state_salone and not all_occupancy_state_salone
        %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_salone =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_salone_on =
        is_state(‘binary_sensor.motion_salone_occupancy’, ‘on’) %} {%
        set all_occupancy_on_salone =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        alarm_armed_salone and all_occupancy_on %}
        red
        {% elif alarm_armed_salone and motion_salone_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ‘:’ + states(‘binary_sensor.salone_all_occupancy’) }} {{
        ': ’ + states(‘binary_sensor.motion_salone_occupancy’) }}
        layout: vertical
        fill_container: false
        badge_icon: |
        {% if is_state(‘switch.salone_detect’, ‘on’) %}
        mdi:webcam
        {% else %}
        mdi:webcam-off
        {% endif %}
        badge_color: >-
        {% set alarm_state_salone =
        states(‘alarm_control_panel.alarmo’) %} {% set occupancy_state
        = states(‘binary_sensor.salone_all_occupancy’) %} {% set
        motion_state_salone =
        states(‘binary_sensor.motion_salone_all_occupancy’) %} {% set
        detect_state_salone = states(‘switch.salone_detect’) %}

        {% if alarm_state_salone in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and occupancy_state == ‘on’ %}
        red
        {% elif alarm_state_salone in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and motion_state_salone ==
        ‘off’ %}
        blue
        {% elif alarm_state_salone == ‘disarmed’ and
        detect_state_salone == ‘on’ %}
        green
        {% elif alarm_state_salone == ‘disarmed’ and
        detect_state_salone == ‘off’ %}
        grey
        {% endif %}
        multiline_secondary: false
        tap_action:
        action: call-service
        service: switch.toggle
        service_data:
        entity_id: switch.salone_detect

      • type: custom:mushroom-template-card
        entity: binary_sensor.salone_all_occupancy
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.salone_all_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.motion_cucina_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: Cucina
        icon: >
        {% set motion_state_cucina =
        is_state(‘binary_sensor.motion_cucina_occupancy’, ‘on’) %} {%
        set all_occupancy_state_cucina =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        not motion_state_cucina and not all_occupancy_state_cucina %}
        mdi:countertop-outline
        {% elif not motion_state_cucina and all_occupancy_state_cucina
        %}
        mdi:cctv
        {% elif motion_state_cucina and all_occupancy_state_cucina %}
        mdi:security
        {% elif motion_state_cucina and not all_occupancy_state_cucina
        %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_cucina =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_cucina_on =
        is_state(‘binary_sensor.motion_cucina_occupancy’, ‘on’) %} {%
        set all_occupancy_on_cucina =
        is_state(‘binary_sensor.salone_all_occupancy’, ‘on’) %} {% if
        alarm_armed_cucina and all_occupancy_on %}
        red
        {% elif alarm_armed_cucina and motion_cucina_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ‘:’ + states(‘binary_sensor.salone_all_occupancy’) }} {{
        ': ’ + states(‘binary_sensor.motion_cucina_occupancy’) }}
        layout: vertical
        fill_container: false
        badge_icon: |
        {% if is_state(‘switch.salone_detect’, ‘on’) %}
        mdi:webcam
        {% else %}
        mdi:webcam-off
        {% endif %}
        badge_color: >-
        {% set alarm_state_cucina =
        states(‘alarm_control_panel.alarmo’) %} {% set occupancy_state
        = states(‘binary_sensor.salone_all_occupancy’) %} {% set
        motion_state_cucina =
        states(‘binary_sensor.motion_cucina_all_occupancy’) %} {% set
        detect_state_cucina = states(‘switch.salone_detect’) %}

        {% if alarm_state_cucina in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and occupancy_state == ‘on’ %}
        red
        {% elif alarm_state_cucina in [‘armed_home’, ‘armed_night’,
        ‘armed_away’, ‘armed_vacation’] and motion_state_cucina ==
        ‘off’ %}
        blue
        {% elif alarm_state_cucina == ‘disarmed’ and
        detect_state_cucina == ‘on’ %}
        green
        {% elif alarm_state_cucina == ‘disarmed’ and
        detect_state_cucina == ‘off’ %}
        grey
        {% endif %}
        multiline_secondary: false
        tap_action:
        action: call-service
        service: switch.toggle
        service_data:
        entity_id: switch.salone_detect

      • type: custom:mushroom-template-card
        entity: binary_sensor.terrazzo_salone_all_occupancy
        card_mod:
        style:
        mushroom-shape-icon$: |
        .shape {
        {% if states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.terrazzo_salone_all_occupancy’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% elif states(‘alarm_control_panel.alarmo’) in [‘armed_home’, ‘armed_night’,‘armed_away’, ‘armed_vacation’] and states(‘binary_sensor.presenza_terrazzo_salone_presence’) == ‘on’ %}
        –shape-animation: ping 1s infinite
        {% endif %}
        } @keyframes ping {
        0% {
        box-shadow: 0 0 5px 1px rgba(var(–rgb-pink), 0.7);
        }

            100% {
              box-shadow: 0 0 5px 15px transparent;
            }
          }
        style: |
          ha-card {
          } 
            :host {
            --mush-icon-border-radius: 10px;
            --mush-icon-size: 70px;
        

        primary: T.salone
        icon: >
        {% set motion_state_terrazzo_salone =
        is_state(‘binary_sensor.presenza_terrazzo_salone_presence’,
        ‘on’) %} {% set all_occupancy_state_terrazzo_salone =
        is_state(‘binary_sensor.terrazzo_salone_all_occupancy’, ‘on’)
        %} {% if not motion_state_terrazzo_salone and not
        all_occupancy_state_terrazzo_salone %}
        mdi:balcony
        {% elif not motion_state_terrazzo_salone and
        all_occupancy_state_terrazzo_salone %}
        mdi:cctv
        {% elif motion_state_terrazzo_salone and
        all_occupancy_state_terrazzo_salone %}
        mdi:security
        {% elif motion_state_terrazzo_salone and not
        all_occupancy_state_terrazzo_salone %}
        mdi:motion-sensor
        {% endif %}
        icon_color: >
        {% set alarm_armed_terrazzo_salone =
        states(‘alarm_control_panel.alarmo’) in [‘armed_home’,
        ‘armed_night’, ‘armed_away’, ‘armed_vacation’] %} {% set
        motion_terrazzo_salone_on =
        is_state(‘binary_sensor.presenza_terrazzo_salone_presence’,
        ‘on’) %} {% set all_occupancy_on_terrazzo_salone =
        is_state(‘binary_sensor.terrazzo_salone_all_occupancy’, ‘on’)
        %} {% if alarm_armed_terrazzo_salone and all_occupancy_on %}
        red
        {% elif alarm_armed_terrazzo_salone and
        motion_terrazzo_salone_on %}
        orange
        {% else %}
        grey
        {% endif %}
        secondary: >-
        {{ ': ’ +
        states(‘binary_sensor.presenza_terrazzo_salone_presence’) }}
        layout: vertical
        fill_container: false
        multiline_secondary: false
        columns: 1

it is working as i was expected in the fronted ,

but when i try to edit it ( edit mode in yaml editor ), after a while, it lag and stop my webpage … i have to refresh page and re-edit again… it’s very frustrating .

For any room, i have : motion sensor, camera detected and i want that icon have three state :
icon status & color with alarm home disarmed

1. camera icon / gray color – if motion and camera detection off and alarm home is disarmed
2. motion icon / gray color – if motion is ON and camera detection off and alarm home is disarmed
3. camera icon / gray color – if motion is OFF and camera detection ON and alarm home is disarmed
4. alarm icon / gray color – if motion is ON and camera detection ON and alarm home is disarmed

icon status & color with alarm home armed

1. camera icon / red color – if motion and camera detection off and alarm home is armed
2. motion icon / red color – if motion is ON and camera detection off and alarm home is armed
3. camera icon / red color – if motion is OFF and camera detection ON and alarm home is armed
4. alarm icon / red color – if motion is ON and camera detection ON and alarm home is armed

any idea how to solve it? also with a different approach

Thanks a lot

[RkcCorian]

So… I have my own my_theme.yaml file. I added your code but without an affect.

Below is my code

my_theme

my_theme:
  # Dashboard Background
  background-image: center / cover no-repeat fixed url(/local/pictures/moon_in_space_4k.jpg)
  lovelace-background: var(--background-image)

  # Cards
  ha-card-background: "rgba(0, 0, 0, 0.5)"
  ha-card-border-radius: "10px"
  ha-card-border-width: "0px"
  ha-card-box-shadow: none

  #Testbereich
  mush-rgb-state-cover-open: "var(--mush-rgb-pink)"
  mush-rgb-state-cover-closed: "var(--mush-rgb-orange)"
  #state-cover-open-color: "#ff0000"
  #mush-rgb-state-cover-open: "#ff0000"
  #mush-rgb-state-cover-closed: "#ff0000"

dashboard

      - type: custom:mushroom-cover-card
        entity: cover.schlafzimmerrollladen
        tap_action:
          action: more-info
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                background: none !important;
              }

[LiQuid_cOOled]

You have to define the colors too…

mush-rgb-pink: 233, 30, 99
mush-rgb-orange: 255, 152, 0

[_Mitch07]

Try to get the washing machine animation working with the following, but it doesn’t work. What am I doing wrong or what am I missing?

  - type: custom:mushroom-template-card
    icon: mdi:washing-machine
    icon_color: amber
    primary: Washing Machine
    secondary: ''
    entity: >-
      binary_sensor.bosch_waxh2m90nl_68a40e43ddf0_bsh_common_status_remotecontrolactive
    card_mod:
      style: |
        mushroom-shape-icon$: |
          ha-icon {
            --icon-animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
            transform-origin: 50% 110%;
          }
          @keyframes shake {
            0%, 100% { transform: translate(0, 0) rotate(0); }
            20%  { transform: translate(0.4px, -0.4px) rotate(-4deg); }
            40%  { transform: translate(-0.4px, 0.4px) rotate(4deg); }
            60%  { transform: translate(0.4px, 0.4px) rotate(-4deg); }
            80%  { transform: translate(-0.4px, -0.4px) rotate(4deg); }
          }
          @keyframes drum {
            50%  { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
          }

[dimitri.landerloos]

Using the old version of the animations. Have a look here:

Mushroom Cards - Build a beautiful dashboard easily

Hi @rhysb, i have made a general mushroom - card-mod styling guide that i have posted here. i have linked to your resource on animations from it because it is great. however since it was made a few things have changed with the way that animations are applied and we get a bunch of questions regarding it right now because people want to use your animations. so i hope you dont mind that i have gone through and updated each of your animations below and will be posting them as a reply here. i will …

[zanixmechanix (Joshua)]

This looks great! I’ve been wanting to redo my remote cards.
I would love to see the number pad and favorite cards.

[_Mitch07]

Thank you, just what i was looking for.

[tvds (Tim)]

@LiQuid_cOOled

Then you can simply add the status of that sensor entity to the icon_color: in lovelace

Many thanks for pointing me in the right direction
Meanwhile I tried a lot of things but none was working. At the end I ended up in this one which is working well now.

Create a template sensor:

template:
  - sensor:
      - name: Lichten Aan Woonkamer
        state: >-
          {{ expand(area_entities('woonkamer'))
            | selectattr('state', 'eq', 'on') 
            | selectattr('domain','eq','light')
            | rejectattr('attributes.device_class','eq','DNDMode')
            | list 
            | count
          }}

And then indeed add the state of this sensor in lovelace:

icon_color: >-
          {%if is_state('sensor.lichten_aan_woonkamer', '0') %} grey {% else %}
          amber {% endif %}

Your support is really appreciated!! Thanks once again!

@LiQuid_cOOled

My only concern is I haven’t seen device_class: use capital letters so DNDMode as device_class may need adjusted. Let me know…

It’s a smart plug and the entity is used to represent the LED light use.

[yafengwy]

Hi! Would you mind sharing the entire code for this part? Thx!

[LiQuid_cOOled]

@tvds I am glad I could help and I appreciate the follow up!!

[Faecon (Jo)]

              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                    primary: Stand
                    icon: mdi:sun-snowflake-variant
                    secondary: >-
                      {% set state=states('climate.tv_ruimte') %} 
                      {% if state=='off' %}
                        Offline
                      {% elif state=='heat' %}
                        Verwarmen
                      {% elif state=='cool' %}
                        Koelen
                      {% elif state=='dry' %}
                        Drogen
                      {% else %}
                        Ventileren
                      {% endif %}   
                    entity: climate.tv_ruimte
                    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);
                        } 
                        ha-card {pointer-events: none;}

                  - type: custom:mushroom-chips-card
                    chips:
                      - type: template
                        entity: climate.tv_ruimte
                        icon: >
                            {% if is_state("climate.tv_ruimte", 'heat_cool') %}
                            mdi:autorenew
                            {% elif is_state("climate.tv_ruimte", 'heat') %}
                              mdi:fire
                            {% elif is_state("climate.tv_ruimte", 'cool') %}
                              mdi:snowflake
                            {% elif is_state("climate.tv_ruimte", 'dry') %}
                              mdi:water-percent
                            {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                              mdi:fan
                            {% else %}
                              mdi:air-conditioner 
                            {% endif %};
                        icon_color: |-
                          {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white', '[84,84,84]') }}   
                        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);
                            }  
                            ha-icon {
                              --mdc-icon-size: 24px;
                            } 
                            ha-card {pointer-events: none;}                  
                    alignment: end

gives me

It looks I have some wrong code, because the second card has to give me an icon, but gives me nothing. Can someone help me ?

Second question… The backgroundcolours of the 2 cards are diffrent. How do I make them like the first card ?

[LiQuid_cOOled]

Try removing the ; after {% endif %} The one right before icon_color :

[Faecon (Jo)]

you are a legend. haha.
And you know the solution for the second question ?

[LiQuid_cOOled]

working on that now. It’s the card_mod code.

[LiQuid_cOOled]

@Faecon

rgba(var(--rgb-primary-background-color), 0.2);

Lets start here and see if that is what you were looking for…

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Stand
    icon: mdi:sun-snowflake-variant
    secondary: |-
      {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
        Offline
      {% elif state=='heat' %}
        Verwarmen
      {% elif state=='cool' %}
        Koelen
      {% elif state=='dry' %}
        Drogen
      {% else %}
        Ventileren
      {% endif %}   
    entity: climate.tv_ruimte
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        ha-card {
         pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: climate.tv_ruimte
        icon: >
          {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew {%
          elif is_state("climate.tv_ruimte", 'heat') %}
            mdi:fire
          {% elif is_state("climate.tv_ruimte", 'cool') %}
            mdi:snowflake
          {% elif is_state("climate.tv_ruimte", 'dry') %}
            mdi:water-percent
          {% elif is_state("climate.tv_ruimte", 'fan_only') %}
            mdi:fan
          {% else %}
            mdi:air-conditioner 
          {% endif %}
        icon_color: >-
          {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
          '[84,84,84]') }}   
    card_mod:
      style: |
        ha-card {
         pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
        }
    alignment: end

My background colors are different so we may need an additional edit.

Based on our multiple interactions, I’d suggest installing vertical stack in card. It allows for a little easier control with card mod. It has both vertical and horizontal mode and eliminates card borders.

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card

[Faecon (Jo)]

What card do I need to change to vertical stack in ?

I have this now

          - type: "custom:stack-in-card"
            cards:              
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card
              - type: horizontal-stack 
                cards:   
                  - type: custom:mushroom-template-card
                  - type: custom:mushroom-chips-card

and I have to add this code to all cards ?

                    card_mod:
                      style: |
                        ha-card {
                        pointer-events: none;
                        --ha-card-border-width: 0px;
                        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
                        box-shadow: none;
                        }

it gives me

[LiQuid_cOOled]

@Faecon

:host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);

No it just needs to be on the main card.

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Stand
        icon: mdi:sun-snowflake-variant
        secondary: |-
          {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
           Offline
          {% elif state=='heat' %}
          Verwarmen
          {% elif state=='cool' %}
          Koelen
          {% elif state=='dry' %}
           Drogen
          {% else %}
           Ventileren
          {% endif %}   
        entity: climate.tv_ruimte
        fill_container: true
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: climate.tv_ruimte
            icon: >
              {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew
              {% elif is_state("climate.tv_ruimte", 'heat') %}
                mdi:fire
              {% elif is_state("climate.tv_ruimte", 'cool') %}
                mdi:snowflake
              {% elif is_state("climate.tv_ruimte", 'dry') %}
                mdi:water-percent
              {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                mdi:fan
              {% else %}
                mdi:air-conditioner 
              {% endif %}
            icon_color: >-
              {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
              '[84,84,84]') }}  
        alignment: end
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Stand
        icon: mdi:sun-snowflake-variant
        secondary: |-
          {% set state=states('climate.tv_ruimte') %}  {% if state=='off' %}
           Offline
          {% elif state=='heat' %}
          Verwarmen
          {% elif state=='cool' %}
          Koelen
          {% elif state=='dry' %}
           Drogen
          {% else %}
           Ventileren
          {% endif %}   
        entity: climate.tv_ruimte
        fill_container: true
        multiline_secondary: false
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: climate.tv_ruimte
            icon: >
              {% if is_state("climate.tv_ruimte", 'heat_cool') %} mdi:autorenew
              {% elif is_state("climate.tv_ruimte", 'heat') %}
                mdi:fire
              {% elif is_state("climate.tv_ruimte", 'cool') %}
                mdi:snowflake
              {% elif is_state("climate.tv_ruimte", 'dry') %}
                mdi:water-percent
              {% elif is_state("climate.tv_ruimte", 'fan_only') %}
                mdi:fan
              {% else %}
                mdi:air-conditioner 
              {% endif %}
            icon_color: >-
              {{ iif(not is_state("climate.tv_ruimte", 'off'), 'white',
              '[84,84,84]') }}  
        alignment: end
card_mod:
  style: |
    ha-card {
        pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--rgb-primary-background-color), 0.2) !important;
        box-shadow: none;
    
        }

We need to figure out exactly what background you are looking for:

This changes the card’s background to green so you can see the one line is controlling the entire background.

card_mod:
  style: |
    ha-card {
        pointer-events: none;
        --ha-card-border-width: 0px;
        background: rgba(var(--mush-rgb-green), 1) !important;
        box-shadow: none;
        }