Trying to set a background color based on the value of an entity. It shows the correct color in the preview of the editor, but does not render properly when viewing the page in the HA app or with Chrome on MacBook.
The first picture is how it renders when viewing the page in HA app. The second is during the preview while editing the card.
Help?
- type: custom:mushroom-template-card
primary: SoC {{states('sensor.spartina_solar_battery_state_of_charge')}}%
icon: mdi:battery
entity: sensor.spartina_solar_battery_state_of_charge
secondary: |-
PV {{states('sensor.pv_power')}} W
Load {{states('sensor.spartina_solar_load_power_3') }} W
multiline_secondary: true
icon_color: green
fill_container: true
badge_color: ""
layout: horizontal
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.66);
--card-primary-font-size: 24px;
--card-background-color:
{% set soc = states('sensor.spartina_solar_battery_state_of_charge') | int(default=0) %}
{% if soc == 100 %} rgba(0,0,255,0.3) !important;
{% elif soc >= 90 %} rgba(0,255,0,0.3) !important;
{% elif soc >= 70 %} rgba(0,200,0,0.3);
{% elif soc >= 50 %} rgba(255,241,118,0.3);
{% elif soc >= 30 %} rgba(249,168,37,0.3);
{% else %} rgba(211,47,47,0.3);
{% endif %}
}
neosou
May 16, 2025, 6:29pm
1299
Hello,
Second: as everyone here I think, I am struggling with something: setting the same height to all chips at once instead of doing it on each chip individually.
card_mod:
style:
mushroom-template-chip:nth-child(n)$: |
ha-state-icon {
margin-right: 1px !important;
}
.: |
ha-card {
height:25px !important;
}
.content {
margin-left:-8px !important;
margin-right:-5px !important;
}
:host {
--mush-chip-spacing: 4px;
}
Neither the ha-card, nor the .content are working, and I can"t find the solution
Thanks again for everything!
HI
I have this code –
entity: input_number.fan_timer_minutes
entity: input_boolean.start_fan_timer
How can I connect this nicely?
Or can I even allow one FAN button to also do a timer - currently it does 2 actions - one turns on and off the FAN and the other, on a long press, selects the speed
What do you think how to arrange the
type: custom:button-card
name: test🏎️
icon: mdi:bed
entity: light.fan_parents_room
tap_action:
action: navigate
navigation_path: "#parents"
show_label: true
label: |
[[[
const temp = parseFloat(states['sensor.fp1_parents_device_temperature']?.state || 0);
const msg = temp > 28 ? "🔥 Too hot!" : temp < 18 ? "❄️ A bit cold" : "✅ Comfort";
return `🌡️ ${temp}°C<br>${msg}`;
]]]
custom_fields:
btn:
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.fan_parents_room
icon: mdi:lamp
tap_action:
action: toggle
show_name: false
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: >
[[[ return states['light.fan_parents_room']?.state ===
'on' ? '#ffe082' : 'rgba(255,255,255,0.08)'; ]]]
- margin-bottom: 12px
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
- type: custom:button-card
entity: fan.fan_parents_room
tap_action:
action: more-info
show_name: false
icon: |
[[[
const fan = states['fan.fan_parents_room'];
const perc = fan?.attributes?.percentage || 0;
if (fan?.state !== 'on') return 'mdi:fan-off';
if (perc >= 100) return 'mdi:fan-speed-3';
if (perc >= 66) return 'mdi:fan-speed-2';
if (perc >= 33) return 'mdi:fan-speed-1';
return 'mdi:fan';
]]]
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: >
[[[ return states['fan.fan_parents_room']?.state === 'on'
? '#80deea' : 'rgba(255,255,255,0.08)'; ]]]
- margin-bottom: 12px
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
- type: custom:button-card
entity: input_boolean.parents_sleep
icon: mdi:weather-night
tap_action:
action: toggle
show_name: false
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: >
[[[ return states['input_boolean.parents_sleep']?.state
=== 'on' ? '#9575cd' : 'rgba(255,255,255,0.08)'; ]]]
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
style: |
:host {
margin-right: 20px;
}
- type: vertical-stack
cards:
- type: custom:button-card
entity: climate.parents
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: "#climatebedroom"
show_name: false
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: >
[[[ return
states['climate.parents'].attributes?.hvac_action ===
'heating' ? '#ff8a80' : 'rgba(255,255,255,0.08)'; ]]]
- margin-bottom: 12px
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
- type: custom:button-card
entity: binary_sensor.window_parents_room
icon: |
[[[
return states['binary_sensor.window_parents_room']?.state === 'on'
? 'mdi:window-open' : 'mdi:window-closed';
]]]
show_name: false
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: >
[[[ return
states['binary_sensor.window_parents_room']?.state ===
'on' ? '#aed581' : 'rgba(255,255,255,0.08)'; ]]]
- margin-bottom: 12px
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
- type: custom:button-card
icon: mdi:dots-horizontal
tap_action:
action: more-info
show_name: false
styles:
card:
- width: 38px
- height: 38px
- border-radius: 50%
- background-color: rgba(255,255,255,0.1)
- transition: all 0.3s ease
- transform: scale(1)
card:hover:
- transform: scale(1.1)
icon:
- color: white
- width: 22px
styles:
grid:
- grid-template-areas: |
"n btn"
"l btn"
"i btn"
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px
- background: linear-gradient(135deg, rgba(55, 65, 80, 0.95), rgba(70, 85, 105, 0.9))
- border-radius: 20px
- backdrop-filter: blur(14px)
- "-webkit-backdrop-filter": blur(14px)
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
- border: 2px solid
- transition: all 0.4s ease-in-out
custom_fields:
btn:
- justify-content: end
- align-self: start
- margin-top: 10px
name:
- justify-self: start
- align-self: center
- font-size: 20px
- font-weight: 700
- color: null
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: null
- opacity: 0.9
icon:
- width: 60px
- opacity: 0.1
card_mod:
style: |
ha-card {
height: 192px !important;
border-color:
[[[
return states['input_boolean.parents_room_occupancy']?.state === 'on'
? '#00e676' : '#90a4ae';
]]] !important;
}
type or paste code here
type or paste code here
Bbobak
May 17, 2025, 12:24pm
1301
Anyone know why occasionally when I open home assistant, my mushroom card styling disappears? If I force close home assistant and reopen it will come back.
See Alarm and Garage cards in the two photos.
Hi friend, thanks for the detailed explanation. I have a question. I used one of your codes, but it turns out the effect continues regardless of whether the entity is on or off. I’d like the effect only when the entity is activated. I tried searching the forum but couldn’t find anything. I hope you don’t mind repeating it.
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.alarma_interna
icon: mdi:alarm-light
fill_container: false
secondary_info: none
name: Interno
icon_color: red
card_mod:
style: |
ha-card {
animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-entity-card
entity: input_boolean.alarma_remota
icon: mdi:alarm-light
fill_container: false
secondary_info: none
icon_color: red
name: Poblacion
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
Thanks, I solved it with this code.
type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.alarma_interna
icon: mdi:alarm-light
fill_container: false
secondary_info: none
name: Interno
icon_color: red
card_mod:
style: |
ha-card {
--animation: {% if is_state('input_boolean.alarma_interna', 'on') %} ping 2s infinite {% else %} none {% endif %};
animation: var(--animation);
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
- type: custom:mushroom-entity-card
entity: input_boolean.alarma_remota
icon: mdi:alarm-light
fill_container: false
secondary_info: none
icon_color: red
name: Poblacion
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-animation: {% if is_state('input_boolean.alarma_remota', 'on') %} ping 2s infinite {% else %} none {% endif %};
animation: var(--shape-animation);
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
It’s most likely card_mod related. Can you post the code for Alarm and Garage cards?
If I remember correctly, I assisted you with the alarm card-mods.
Bbobak
May 29, 2025, 10:12am
1304
Yes you did help with these.
Alarm:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.the_bobak_s_alarm
states:
- armed_home
- armed_away
show_keypad: true
grid_options:
columns: 12
rows: null
layout: vertical
icon: ""
icon_type: none
primary_info: none
fill_container: false
card_mod:
style:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
stroke: grey;
stroke-width; .8px;
margin-top: -10px;
--card-mod-icon: {{ 'mdi:shield-moon' if is_state(config.entity, 'armed_home') or is_state(config.entity,'disarmed') else 'mdi:home-lock' }};
--card-mod-icon-color: {{ 'black' if is_state(config.entity, 'armed_home') or is_state(config.entity, 'disarmed') else 'blue' }};
--control-icon-size: 30px;
}
.button {
--bg-color: {{ '#780000' if is_state(config.entity, 'armed_home') or is_state(config.entity, 'disarmed') else '#FFA500' }};
}
.button:after {
content: "{{ 'ARMED HOME' if states('alarm_control_panel.the_bobak_s_alarm') == 'armed_home' or states('alarm_control_panel.the_bobak_s_alarm') == 'disarmed' else 'ARMED AWAY' }}";
margin-top: -20px;
position: absolute;
font-size: 10px;
color: white; !important;
font-weight: 800 !important;
top: 91px;
}
mushroom-button:nth-child(2)$: |
.button ::slotted(*) {
stroke: black;
stroke-width: .8px;
margin-top: -10px;
--card-mod-icon: {{ 'mdi:home-lock' if is_state(config.entity, 'armed_away') or is_state(config.entity, 'disarmed') else 'mdi:shield-moon' }};
--card-mod-icon-color: {{ 'blue' if is_state(config.entity, 'armed_away') or is_state(config.entity, 'disarmed') else 'black' }};
--control-icon-size: 30px;
}
.button {
--bg-color: {{ '#FFA500' if is_state(config.entity, 'armed_home') or is_state(config.entity, 'disarmed') else '#780000' }};
}
.button:after {
content: "{{ 'ARMED AWAY' if states('alarm_control_panel.the_bobak_s_alarm') == 'armed_home' or states('alarm_control_panel.the_bobak_s_alarm') == 'disarmed' else 'ARMED HOME' }}";
margin-top: -20px;
position: absolute;
font-size: 10px;
color: black;
font-weight: 800 !important;
top: 91px;
}
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
--card-primary-font-size: 20px;
}
Garage:
type: custom:mushroom-cover-card
entity: cover.garage_door_0a061f_ratgdo
layout: horizontal
show_buttons_control: true
show_tilt_position_control: false
show_position_control: false
grid_options:
columns: 12
rows: 2
name: Garage Door - Main
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 40px;
--shape-color: null !important;
--shape-animation:{{ 'ping 2s infinite' if is_state(config.entity, 'open') else 'none' }};
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
mushroom-state-info$: |
.container {
justify-content: flex-start !important;
align-items: start !important;
gap: 8px !important;
}
.info {
text-align: left !important;
}
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1)$: |
.button {
margin-top: 0px !important;
margin-left: -107px !important;
height: 35px !important;
width: 90px !important;
}
mushroom-button:nth-child(2)$: |
.button {
margin-top: 0px !important;
margin-left: -52px !important;
height: 35px !important;
width:90px !important;
}
.: |
ha-state-icon {
{% set state = states('cover.garage_door_0a061f_ratgdo') %}
{% if state == ('open') %}
color: var(--red-color) ;
{% else %}
color: var(--green-color) ;
{% endif %}
}
bob92
May 31, 2025, 7:32pm
1305
I am trying to adjust the corner radius of the mushroom media player volume slider and not making much headway. Any one have any pointers?
Frosty
May 31, 2025, 11:19pm
1306
this should do it
type: custom:mushroom-media-player-card
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: |
.slider {
border-radius: 50px !important ;
}
entity: media_player.lounge_tv
volume_controls:
- volume_set
1 Like
nasgul
June 9, 2025, 8:47am
1307
I am having an issue with the mushroom-title-card below showing the > sign at the end of the title line! any advice on where to look to remove it?
type: custom:mushroom-title-card
title: "{{states('sensor.time')}}"
grid_options:
rows: 2
alignment: center
title_tap_action:
action: navigate
navigation_path: /2025-mushbase
subtitle: >
{{now().strftime('%A') }} {{ now().strftime(" %B %_d, %Y" ) }}
Out: {{states('sensor.1806_in_outdoor_temperature')}}
C° In:
{{states('sensor.1806_in_temperature')}} C°
card_mod:
style: |
ha-card {
--title-font-size: 43px !important;
--title-font-weight: bold !important;
--subtitle-font-size: 17px !important;
padding-top: 12px !important;
}
nasgul:
/2025-mushbase
It’s your Navigation Tap Action
Use this…
card_mod:
style: |
ha-card {
--title-font-size: 43px !important;
--title-font-weight: bold !important;
--subtitle-font-size: 17px !important;
padding-top: 12px !important;
}
.actionable ha-icon {
color: transparent !important;
}
amplitur
June 17, 2025, 4:02am
1309
Hi,
does anyone know how to reduce the spacing above and below the primary info text line in vertical layouut mode = above and below the word “Test” in the screenshot below?
My current code is looking like this:
type: custom:mod-card
style: |
ha-card {
background-color: light-grey;
border: solid;
border-width: 0.1em;
border-color:light-gray;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
}
card:
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.bathroom_lutz_dimmer_switch
primary_info: name
name: Test
icon: mdi:light-flood-down
layout: vertical
secondary_info: none
card_mod:
style: |
:host {
--mush-icon-size: 28px;
--card-primary-font-size: 12px !important;
--card-primary-line-hight: 20px;
}
- type: custom:mushroom-light-card
- type: custom:mushroom-light-card
- type: custom:mushroom-light-card
- type: custom:mushroom-light-card
Here is a method
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.bathroom_lights
primary_info: name
name: Test
icon: mdi:light-flood-down
layout: vertical
secondary_info: none
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px 0px;
--card-primary-font-size: 12px;
}
.: |
ha-state-icon {
--icon-symbol-size: 28px;
}
1 Like
amplitur
June 17, 2025, 11:04pm
1312
Works like a charme, thanks a lot!
1 Like
HA_Fun
June 22, 2025, 3:01pm
1313
Hello - I’m trying to get ha-card formatting to work alongside mushroom-shape-icon to animate the shape and can’t seem to figure out how to get both to work. I can get one or the other. Thoughts?
card_mod:
style: |
ha-card {
font-variant: small-caps;
border: transparent;
}
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s linear infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
HA_Fun
June 22, 2025, 3:31pm
1314
This works:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 2s linear infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
.: |
ha-card {
font-variant: small-caps;
border: transparent;
}
Hi!
- type: custom:mushroom-template-card
entity: switch.steckdose_7
primary: Lichterkette
icon: mdi:string-lights
icon_color: |
{% if is_state('switch.steckdose_7', 'on') %}
yellow
{% else %}
grey
{% endif %}
secondary: |
{{state_translated('switch.steckdose_7') }}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
}
I have plenty of such (and lights, shutters, thermostat …) cards, all having the same style.
licht_template:
card:
type: custom:mushroom-template-card
entity: '[[entity]]'
primary: '[[name]]'
icon: '[[icon]]'
icon_color: |
{% if is_state('[[entity]]', 'on') %}
yellow
{% else %}
grey
{% endif %}
secondary: |
{{state_translated('[[entity]]') }}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
mushroom-template-card$: |
ha-card {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
Unfortunately I cannot get rid of the borders. I made a simple test card:
type: custom:stack-in-card
cards:
- type: custom:decluttering-card
template: licht_template
variables:
- name: Lichterkette
- icon: mdi:string-lights
- entity: switch.steckdose_7
I see that just putting this card into a stack-in-card shows this behaviour.
Test this…
licht_template:
card:
type: custom:mushroom-template-card
entity: '[[entity]]'
primary: '[[name]]'
icon: '[[icon]]'
icon_color: |
{% if is_state('[[entity]]', 'on') %}
yellow
{% else %}
grey
{% endif %}
secondary: |
{{state_translated('[[entity]]') }}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
Unfortunately nothing changed
I tested it and it works.
type: custom:decluttering-card
template: test_template
variables:
- name: Example
- icon: mdi:mushroom
- entity: light.night_stand
decluttering_templates:
test_template:
card:
type: custom:mushroom-template-card
entity: '[[entity]]'
primary: '[[name]]'
icon: '[[icon]]'
icon_color: |
{% if is_state('[[entity]]', 'on') %}
white
{% else %}
black
{% endif %}
secondary: |
{{state_translated('[[entity]]') }}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: darkorange !important;
box-shadow: 0px 1px 0px 0px rgb(0,0,0),
0px 7px 10px 0px rgb(10,10,10),
inset 0px 1px 3px 0px rgba(250, 250, 250, .5),
inset 0px -5px 5px 0px rgba(0, 0, 0, .6) !important;
}
.: |
ha-card {
background: grey !important;
--icon-symbol-size: 20px;}
keep up the good work!
