mush-chip-box-shadow is back, see the newest release notes.
New variables for themes :
--mush-chip-border-color--mush-chip-border-width--mush-chip-box-shadow
2 Likes
But only for the 2022.11 release because there is breaking changes for card border with the latest Home Assistant Beta release.
3 Likes
Latest mushroom themes update cleared the content of my mushroom theme file, make sure to make a backup before updating
You’re right, 
I should have been clearer by saying wait the few days until the release of 2022.11 before changing everything back and forth.
Is it possible to align icon as well to right? I mean from right - icon first then text. Like Horizontal flip.
Is it possible to turn standard history graph to look more like mushroom card?
Something like this weather card.
Or maybe is some custom card which will be better to use to do it.
There is a custom card that has a lot of customizations
3 Likes
My card error
bad indentation of a mapping entry (2:5)
1 | - type: custom:stack-in-card
2 | cards:
---------^
3 | - type: grid
4 | square: false
where is that card coming from?
Indentation is wrong.
type: custom:stack-in-card
cards:
- type: grid
square: false
cards:
- …
1 Like
It’s the new tabbed-card 
You can do this in the “Raw configurator editor”. You can open it via three dots menu while editing dashboard.
yeah found it in Hacs
You mind sharing - looks simple and awesome!
Hi thank your for sharing your code.
i tried to add this to my card including the animations that you recently provided. But somehow the animations don’t work. can you please tell me where i have to make changes in code ?
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.smart_ac_control_wr2991201792
hvac_modes:
- heat
- cool
- fan_only
show_temperature_control: true
layout: horizontal
name: Schlafzimmer Klima
icon: mdi:air-conditioner
double_tap_action:
action: more-info
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.wohnzimmer_temperature
name: Temperature
color: '#00bb33'
- entity: sensor.wohnzimmer_humidity
name: Humidity
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
12 Likes
You can reverse the Mushroom Card like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scaleX(-1);
text-align: right;
}
.: |
ha-card {
transform: scaleX(-1);
transition: 0s;
}
7 Likes
Is there a way to animate the icon in a mushroom-chips-card?
Sorry, couldn’t find the solution scrolling through the whole thread.
My code (thats’ currently not working):
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.solar_poweractueel
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
You can place a border around the Mushroom Title Card like this:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: 🍄 Mushrooms
alignment: center
card_mod:
style: |
mushroom-title-card {
display: block;
border-radius: 14px;
border: solid rgba(var(--rgb-green), 0.5);
--title-padding: 14px;
}
5 Likes
Hi,
Try this animation: rays 2s infinite; instead of your code --icon-animation: rays 2s infinite;
Best regards
Thekholm
1 Like