This is the way for whoever might be struggling. You define a variable for a css property and specify that in your active theme like so:
card_mod:
style: |
badge_text_colour {
color: var(--badge-text-color);
}
Mushroom Shadow Child:
# Home Assistant override
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
modes:
light:
badge-text-color: white
dark:
badge-text-color: black
I already fixed that
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
border: none;
background: none;
}
icon: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
mdi:weather-night
{% elif state == "cloudy" %}
mdi:weather-cloudy
{% elif state == "fog" %}
mdi:weather-fog
{% elif state == "hail" %}
mdi:weather-hail
{% elif state == "lightning" %}
mdi:weather-lightning
{% elif state == "lightning-rainy" %}
mdi:weather-lightning-rainy
{% elif state == "partlycloudy" %}
mdi:weather-partly-cloudy
{% elif state == "pouring" %}
mdi:weather-pouring
{% elif state == "rainy" %}
mdi:weather-rainy
{% elif state == "snowy" %}
mdi:weather-snowy
{% elif state == "snowy-rainy" %}
mdi:weather-snowy-rainy
{% elif state == "sunny" %}
mdi:weather-sunny
{% elif state == "windy" %}
mdi:weather-windy
{% elif state == "windy-variant" %}
mdi:weather-windy-variant
{% else %}
mdi:weather-cloudy-alert
{% endif %}
icon_color: |-
{% set state = states(entity) %}
{% if state == "clear-night" %}
orange
{% elif state == "cloudy" %}
grey
{% elif state == "fog" %}
grey
{% elif state == "lightning" %}
yellow
{% elif state == "lightning-rainy" %}
blue
{% elif state == "partlycloudy" %}
amber
{% elif state == "sunny" %}
amber
{% elif state == "pouring" %}
blue
{% elif state == "rainy" %}
blue
{% elif state == "snowy" %}
black
{% elif state == "snowy-rainy" %}
black
{% elif state == "windy" %}
green
{% elif state == "windy-variant" %}
green
{% else %}
default
{% endif %}
primary: Warunki pogodowe
secondary: |-
{% set condition_map = {
"clear-night": "pogodna noc",
"cloudy": "pochmurno",
"exceptional": "warunki nadzwyczajne",
"fog": "mgÅa",
"hail": "grad",
"lightning": "wyÅadowania atmosferyczne",
"lightning-rainy": "burza",
"partlycloudy": "czÄÅciowe zachmurzenie",
"pouring": "ulewa",
"rainy": "deszczowo",
"snowy": "opady Åniegu",
"snowy-rainy": "deszcz ze Åniegiem",
"sunny": "sÅonecznie",
"windy": "wietrznie",
"windy-variant": "wietrznie"
}
%}
{{ condition_map.get(states(entity)) }}
tap_action:
action: navigate
navigation_path: /lovelace/climate
entity: weather.home
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-box-shadow: none;
border: none;
background: none;
}
cards:
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
div.chip-container {
margin-bottom: -14px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.temperature_outdoor
icon_color: amber
- type: entity
entity: sensor.humidity_outdoor
icon_color: blue
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
div.chip-container {
margin-bottom: -14px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.pressure_outdoor
icon_color: green
- type: entity
entity: sensor.home_forecast_precipitation_probability
icon_color: purple
Hi,
sorry for the noob question but Iām new to Mushroom Card and Templates in general.
I have a curtain motor configured as a dimmable light, so that when the attribute ābrightnessā is at 0 the curtains are closed, while when the brightness is at 255 the curtains are open.
I am using a Musrhoom Card Template Card, and I would like to change the mdi:icon based on the brightness of the entity.
So that if brightness is 255 ā mdi:curtains
If brightiness is 0 ā mdi:curtains-closed
Else ā mdi:curtains-closed
I managed to achieve an icon change based on the state of the entity but not based on the value on one attribute.
Can someone help me out on this?
Thank-you
To elaborate on this and hopefully make it clearer. Say we have 3 climate devices, an ac, a fan and a dehumidifier that if all were working at the same time all 3 badges would be visible. Otherwise only the active device should show up in its respective badge. Is this at all possible? Thanks again for all your hard work!
@Mattia2399, Hi and thanks for this, I managed to get some ideas and am now a step closer:
The card does now work and the drum spins in red when the machine is running. But I need some help tidying it up.
How can I get rid of the border around the top?
How can I move my chips higher?
Here is my full code.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
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);
}
@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); }
} {% endif %}
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
multiline_secondary: false
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: >
Time - {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}}
Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}}
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} blue {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} red {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %} ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
} {% endif %} .shape {
--shape-color: none;
}
.: |
ha-card {
width: px;
top: -67px;
ha-card {
--border-width: 0px;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
}
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
card_mod:
style: |
ha-card {
height:170px !important;
}
myself id look a couple of posts up at Bieniu and used that with your info as there pretty much the same
So finally its done! After several tries I have managed to get the washing machine card I was working on to look like and do what I want. Thanks to all who pointed me in the right direction and thanks to @rhysb for creating those awesome animated icons and to @Mattia2399 who kept sharing his code but didnāt work for me 
.
Here is the finished card in action (this is an animated gif, much smoother in reality):
Also a thank you to @SteffenDE for his card inspiration.
If any one is interested in the card, let me know and I can post the code.
Nice,
Please post the code 
Best regards
Thekholm
@Thekholm hereās the code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
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);
}
@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); }
} {% endif %}
.: |
ha-card {
background: none;
border: none;
}
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
multiline_secondary: false
primary: |2-
{% set d ={
'Delayed start': 'Delayed Start',
'Running': 'Running',
'Cycle is finished': 'Cycle Ended',
'Off': 'Off'
} %}
{{ d.get(states(entity)) }}
secondary: >
Time - {{states('sensor.electrolux_sawa_washing_machine_wm1_timetoend')}}
Min
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclephase')}}
{{states('sensor.electrolux_sawa_washing_machine_wm1_cyclesubphase')}}
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} blue {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
- type: custom:mushroom-template-card
entity: sensor.electrolux_sawa_washing_machine_wm1_appliancestate
icon: >-
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %}
mdi:washing-machine
{% elif
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Cycle is finished') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Running' %} red {% elif
state== 'Delayed start' %} orange {% elif state== 'Cycle is finished' %}
purple {% else %} grey {% endif %}
card_mod:
style:
mushroom-shape-icon$: >
{% if
is_state('sensor.electrolux_sawa_washing_machine_wm1_appliancestate',
'Running') %} ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
} {% endif %} .shape {
--shape-color: none;
}
.: |
ha-card {
top: -65px;
background: none;
border: none;
}
- type: custom:mushroom-chips-card
alignment: center
card_mod:
style: |
div.chip-container {
margin-top: -61px;
--chip-border-width: 0px;
--chip-background: none;
}
chips:
- type: template
icon: mdi:tshirt-crew-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_programuid
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: '{{states(''sensor.electrolux_sawa_washing_machine_wm1_programuid'') }} '
- type: template
icon: mdi:thermometer
entity: sensor.electrolux_sawa_washing_machine_wm1_analogtemperature
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogtemperature')
}}Ā°C
- type: template
icon: mdi:alpha-s-circle-outline
entity: sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{{states('sensor.electrolux_sawa_washing_machine_wm1_analogspinspeed')
}}
- type: template
entity: binary_sensor.electrolux_sawa_washing_machine_wm1_doorlock
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
content: >-
{% set d ={ 'off': 'Locked', 'on': 'Unlocked', } %}
{{d.get(states(entity)) }}
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:lock
{% else %}
mdi:lock-open-outline
{% endif %}
card_mod:
style: |
ha-card {
height:115px !important;
width: 285px
background: none;
}
Modifications have to be made for themes. The code is for the default theme.
Another card I am working on. So I have a garage that opens by means of a ābuttonā switch with a toggle action.
Anyone know how to animate the card when the button is pressed only?
type: custom:mushroom-template-card
primary: 'Garage '
secondary: Open/Close
icon: mdi:garage-variant
entity: button.garage_switch
tap_action:
action: toggle
icon_color: brown
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
You can try just putting an if else inside the ha-icon.
As far as the washing machine paper is concerned, nice job, I will definitely take a cue from it when I buy a smart one. 
@Mattia2399, creating an if else statement for an entity state I can do as in the washing machine card but when I check the state of the button I get a timestamp ā2023-05-22T05:13:53.304133+00:00ā.
How would I work that in?
style:
mushroom-shape-icon$: >
{% if
is_state('button.garage_switch',
'**XXXX**) %}
???
Nice work, looks great!
Which theme is that you are using ? - I like the ā3dā effect to the card.
Thats the SoftUI theme: with a bit of tweaks. It can be found here:
https://community.home-assistant.io/t/so-i-made-some-soft-ui-themes/220908
However I have resorted to the default theme and code for the washing machine is based on the default theme.
Some cards like āExpander Cardsā donāt play nice with themes.
I also have a button for the gate with animation, but since it is connected to the āāonāā state of button, i will see the animation for only a very few milliseconds.
mushroom-shape-icon$: |
ha-icon {
{% if is_state('button.garage', 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
{% else %}
{%endif%}
}
I wonder if someone might be able to post an example of using an expander card with a mushroom title card (or otherwise, maybe a template card) as theā¦ title card? Particularly with modified colors and fonts. My mushroom title card is working perfectly as the title card for my expander card, but everything Iāve tried to change the background color and font has not had any effect. Hereās what I have currently:
- type: custom:expander-card
title: ''
cards:
- type: entities
entities:
- entity: climate.first_floor_baseboards
name: First Floor
icon: mdi:radiator
- entity: climate.second_floor_baseboards
name: Second Floor
icon: mdi:radiator
- entity: climate.master_bedroom_baseboards
name: Master Bedroom
icon: mdi:radiator
- entity: climate.basement_baseboards
name: Basement
icon: mdi:radiator
state_color: true
style:
.: |
ha-card {
height: 4em;
background: none;
box-shadow: none;
}
state_color: false
button-background: rgba(7, 103, 215, 0.24)
clear: false
padding: '0'
child-padding: '0'
gap: '0'
title-card:
type: custom:mod-card
style: |
ha-card: {
--background: rgba(7, 103, 215, 0.24)
}
card:
type: custom:mushroom-title-card
title: BASEBOARD HEATERS
card-mod:
style: |
mushroom-title-card$: |
.header {
--title-padding: 23px 0px 40px;
letter-spacing: -0.12vw!important;
}
.title {
font-size: 35px!important;
font-weight: 520!important;
}
I seem to be able to change the color of only the expander button. The font-size and font-weight keys donāt have any affect on the title card. Nor does the --background have any affect on the color of the card.
@Mattia2399 I tried and it didnāt work.
type: custom:mushroom-template-card
primary: 'Garage '
secondary: Open/Close
icon: mdi:garage-variant
entity: button.garage_switch
tap_action:
action: toggle
icon_color: brown
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('button.garage_switch', 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
{% else %}
{%endif%}
}
I suspect that its a state issue with the button as the attribute is not āonā but a timestamp.