These all work and correspond to the actual color.
--rgb-state-climate-auto
--rgb-state-climate-cool
--rgb-state-climate-dry
--rgb-state-climate-fan-only
--rgb-state-climate-heat
--rgb-state-climate-heat-cool
--rgb-state-climate-idle
--rgb-state-climate-off
Thank you so much Dimitri!
It as worked…
How i know i need to put this mushroom-cover-position-control$:?
Take a look at the guide in my profile. First post section titled: “what the $ and .: | symbols do”.
That will explain how you can do it 
Excelent work, i had not seen, thanks a lot, for your work and help 
I love this! but struggling to solve my own needs on this issue How do i create an badge with a spinning green fan if <switch.double_switch_2_current_value_2> is on for this card?
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
Thank you. This works as expected:
type: custom:mushroom-climate-card
entity: climate.2e_ac
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, "heat") %}
--shape-animation: pingheat 1.5s infinite;
{% elif is_state(config.entity, "cool") %}
--shape-animation: pingcool 1.5s infinite;
{% elif is_state(config.entity, "dry") %}
--shape-animation: pingdry 1.5s infinite;
{% elif is_state(config.entity, "fan_only") %}
--shape-animation: pingfan 1.5s infinite;
{% endif %}
} @keyframes pingheat {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-heat),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingcool {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-cool),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingdry {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-dry),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
} @keyframes pingfan {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-state-climate-fan-only),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
cheers,
You could just use the built in badges for the majority of that and then animate it.
type: custom:mushroom-template-card
primary: Bad
secondary: |-
{{states ('sensor.sensor_bad_1_etg_temperature')}}°C
-
{{states ('sensor.sensor_bad_1_etg_humidity')}}%
icon: mdi:bathtub
entity: switch.double_switch_2_current_value
icon_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
orange
{% endif %}
badge_icon: |-
mdi:fan
badge_color: |-
{% if is_state('switch.double_switch_2_current_value', 'on')%}
blue
{% endif %}
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/bad
hold_action:
action: toggle
fill_container: true
card_mod:
style: |
mushroom-badge-icon {
{% if is_state('switch.double_switch_2_current_value', 'on')%}
animation: spin 1s linear infinite;
{% else %}
display: none;
{% endif %}
}
Hello,
Does anyone know how I can set the bottom bar to “automatic” distance, for any desired device?
now there is always wasted space under the last bar, and I would like everything to fill the screen.
Climate card:
Any way to increase the container size of the temperature controls?
type: custom:mushroom-climate-card
entity: climate.thermostats_2e
fill_container: true
show_temperature_control: true
layout: vertical
primary_info: none
icon_type: none
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 3rem;
padding: 1rem
}
#container {
background: red;
height: 5rem ;
padding: 1rem;
}
#container .button:nth-child(1) {
--control-icon-size: 4rem; }
#container .button:nth-child(3) {
--control-icon-size: 4rem; }
.: |
ha-card {
width: 20rem;
height: 10rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
}
try like this:
type: custom:mushroom-climate-card
entity: climate.office_heating
fill_container: true
show_temperature_control: true
layout: vertical
primary_info: none
icon_type: none
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 3rem;
padding: 1rem
}
#container {
background: red;
padding: 1rem;
height: 200px !important;
}
#container .button:nth-child(1) {
--control-icon-size: 4rem;
}
#container .button:nth-child(3) {
--control-icon-size: 4rem;
}
mushroom-button-group$: |
.container {
height: 200px !important;
}
.: |
ha-card {
width: 20rem;
height: 10rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
}
Why do I end up with an offset between the 2 containers ?
ps: styles and colors for testing purposes only 
type: custom:mushroom-climate-card
entity: climate.thermostat_2e_fireplace
show_temperature_control: true
layout: horizontal
primary_info: none
icon: mdi:thermometer
secondary_info: none
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 2rem;
padding-left: 1rem
padding-right: 1rem
}
#container {
background: red;
padding: 1rem;
height: 4rem !important;
width: 20rem !important;
}
#container .button:nth-child(1) {
--control-icon-size: 3rem;
}
#container .button:nth-child(3) {
--control-icon-size: 3rem;
}
mushroom-button-group$: |
.container {
height: 4rem !important;
width: 20rem !important;
background: green;
padding: 0rem !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 3rem;
--icon-size: 4rem;
}
.: |
ha-card {
width: 30rem;
height: 5rem !important;
padding: 0rem !important;
border: solid ;
background: yellow ;
align-items: center;
}
try to throw a justify-content: flex-start !important; in your button group container.
its currently flex end so it wont fit.
That was it 
Thank you!
hi Dimitri.
Can you help to set “secondary” in Christmas tree card (animated)… if I add secondary It give me an error.
Anyway, I have two Christmas tree, and I need two card. could you show me a different Christmas tree card so I can avoid errors to turn on the lights?
thanks
Trying to figure out the switch to dark-mode, but can’t quite figure out how to adjust the colors based on the state of the host. I’ve removed the references to :host here for clarity. It currently looks like the first image, which is fine when in light mode, but I’m trying to have it adjust to the second when dark mode is detected.
type: custom:stack-in-card
cards:
- type: custom:mushroom-fan-card
entity: fan.air_purifier
primary_info: name
show_oscillate_control: false
show_percentage_control: true
icon: mdi:blank
name: Air Purifier
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: #7fdee9 !important;
--bg-color: #ccf2f6 !important;
}
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: fan.air_purifier
icon: mdi:air-purifier
icon_color: '{{ ''cyan'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
badge_icon: mdi:power
badge_color: '{{ ''#3CB371'' if is_state(entity, ''on'') else ''#DAA520'' }} '
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
ha-state-icon {
animation: air {{ 25 / state_attr(config.entity , 'percentage') }}s infinite;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
}
{% else %}
{% endif %}
ha-card {
width: 69px;
top: -121px;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: switch.air_purifier_auto_mode
icon: mdi:fan-auto
icon_color: '{{ ''#FF8360'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
{% else %}
{% endif %}
ha-card {
width: 69px;
top: -186px;
float: right;
}
- type: custom:mushroom-template-card
primary: null
layout: horizontal
entity: light.air_purifier_led
icon: >-
{{ 'mdi:lightbulb-on' if is_state(entity, 'on') else 'mdi:lightbulb-off'
}}
icon_color: '{{ ''#FEDC97'' if is_state(entity, ''on'') else ''disabled'' }} '
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
{% else %}
{% endif %}
ha-card {
width: 43px;
top: -252px;
left: -69px;
float: right;
}
card_mod:
style: |
ha-card {
height: 122px;
}
You can use @media queries in card mod like this for example (but works for anything, just keep in mind the element needs to be in the @media query, and not the variables).
Dark Mode:
Light Mode:
card_mod:
style: |
@media (prefers-color-scheme: dark) {
ha-card {
background-color: darkblue;
}
}
@media (prefers-color-scheme: light) {
ha-card {
background-color: lightblue;
}
}
just bear in mind that doing this does start making your code harder to read - so i would limit the use if possible
You are going to have to show me what you have tried already.
Does anyone know how to vertical alignment this mushroom entity card as described in the picture?
Thank you!
yes!
first card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.smart_switch_2101058756376290838848e1e94400bc_outlet
icon: mdi:pine-tree
icon_color: green
primary: Luci Albero di Natale
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-size: 20px;
top: 16px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
ha-state-icon {
animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
card_mod:
style: |
ha-card {
height: 66px;
}
second old card before your update for others mass lights:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.koogeek_o1eu_b56a4b_outlet3
icon: mdi:pine-tree
icon_color: green
primary: Addobbo Portale
- type: custom:mushroom-template-card
icon: mdi:star-four-points
icon_color: yellow
primary: Star
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: star 8s ease infinite alternate;
}
@keyframes star {
0%, 100% { transform: translateY(-10px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-10px) rotate(360deg) scale(0.6); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
- type: custom:mushroom-template-card
icon: mdi:grain
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--icon-color: rgb(var(--rgb-red)); }
6.25% { --icon-color: rgb(var(--rgb-deep-orange)); }
12.5% { --icon-color: rgb(var(--rgb-orange)); }
18.75% { --icon-color: rgb(var(--rgb-amber)); }
25% { --icon-color: rgb(var(--rgb-yellow)); }
31.25% { --icon-color: rgb(var(--rgb-lime)); }
37.5% { --icon-color: rgb(var(--rgb-light-green)); }
43.75% { --icon-color: rgb(var(--rgb-green)); }
50% { --icon-color: rgb(var(--rgb-teal)); }
56.25% { --icon-color: rgb(var(--rgb-cyan)); }
62.5% { --icon-color: rgb(var(--rgb-light-blue)); }
68.75% { --icon-color: rgb(var(--rgb-blue)); }
75% { --icon-color: rgb(var(--rgb-indigo)); }
81.25% { --icon-color: rgb(var(--rgb-deep-purple)); }
87.5% { --icon-color: rgb(var(--rgb-purple)); }
93.75% { --icon-color: rgb(var(--rgb-pink)); }
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -132px;
}
- type: custom:mushroom-template-card
icon: mdi:gift
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 4s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.shape {
--shape-color: none;
--icon-size: 18px;
top: 18px;
left: 18px;
}
.: |
ha-card {
width: 66px;
top: -198px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
thank you