pretty all ill use if its icon color or changed for an icon
{% set state = states(entity) %} {% if state == 'on' %}
#ADFF2F
{% elif state == 'off' %}
#9E9E9E
{% endif %}
This is based on template mushroom? The way how i do it is global. So for all switches that are created
They are indeed. Just inspect element and then drill down.
i know its been awhile but i cant get the drop down to work
UPDATE PLEASE READ THIS POST INSTEAD HERE.
i figured since there seem have been quite a few questions (likely because of the recent update) about how to target certain elements in Mushroom cards with Card Mod that i would try and make a comprehensive guide on how to style each element in mushroom cards.
First things first to get it out of the way. Card Mod is technically not supported by Mushroom. it works in most instances. but if anything breaks in the future it is up to you to update your yaml config for the card.
i will try and keep these guides updated for as long as possible. so if you spot something that no longer works let me know.
i am only going to give some examples of styles you can apply. this is only intended to help you understand how to target certain things in mushroom cards.
Icon Only Styling
if you want to style the ICON Itself Only:
card_mod:
style: |
ha-state-icon {
--card-mod-icon: mdi:mushroom;
color: lightgreen;
--icon-symbol-size: 40px;
}
Notice that the color set only affects the ICON itself. not the SHAPE background. this is blue, because in the visual editor the icon color is set to blue. this is just overwritten for the icon itself in Card Mod.
This applies to any Mushroom card that has 1 single icon in it. i tested all single icon cards that i have a device for. and all work the same way.
Shape/Background Styling
if you instead wanted to style the background of the mushroom icon. it can be done like this.
card_mod:
style: |
mushroom-shape-icon {
--shape-color: rgba(255, 178, 0, 0.5) !important;
--icon-symbol-size: 21px;
--icon-size: 100px;
}
setting the --icon-symbol-size to 21px keeps it the same size as original. and you are then free to apply any styling to the background itself.
Text Styling
In general if you want to style text on almost any Mushroom card it can be completed like this:
card_mod:
style: |
ha-card {
--secondary-text-color: rgb(var(--rgb-green));
--card-secondary-font-size: 40px;
--card-primary-font-size: 10px;
--primary-text-color: rgb(var(--rgb-red));
font-family: 'Lucida Console';
font-weight: 1;
}
Notice that the font weight is set to 1. this actually does decrease the weight of the text.
also a note that this same styling now works for title card as well.
it does however seem that the secondary and primary are flipped for some reason. not a big issue to work around 
Card Background Styling
In order to style background it is quite easy. you only need to add the below:
card_mod:
style: |
ha-card {
background-color: #0c3b0c;
}
Just to give a bit extra on this one. i like changing this based on the theme being used on the device (dark or light).
card_mod:
style: |
@media (prefers-color-scheme: dark) {
ha-card {
background-color: #0c3b0c;
}
}
@media (prefers-color-scheme: light) {
ha-card {
background-color: #defce0;
}
}
vs
Chip Styling
This section doesnt refer to styling the chip card, but the chips themselves instead.
in order to style a specific chip i have found that the below works best:
use card mod under the chip itself if you are changing the background. careful if you are using a conditional chip to put this under the chip that you create under the conditional chip.
- type: conditional
conditions:
- entity: input_boolean.dishwasher
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: sensor.kitchen_dishwasher_plug_power
icon: mdi:dishwasher
icon_color: |-
{% if states('input_boolean.dishwasher') == 'on' %}
#8489fa
{% else %}
#87ff7d
{% endif %}
content: |-
{% if states('input_boolean.dishwasher') == 'on' %}
{% if states('timer.dishwasher_run_time') == 'active' %}
{% set ct = state_attr('timer.dishwasher_run_time', 'finishes_at') | as_datetime %}
{{ '00:00' if now() > ct else (ct - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) }}
{% else %}
0h 0m
{% endif %}
{% else %}
{% endif %}
card-mod:
style: |
ha-card {
{% if states('input_boolean.dishwasher') == 'on' %}
--chip-background: #001f5c;
{% else %}
--chip-background: #175400;
{% endif %}
}
but if you are doing anything else, especially fancy things like animations. i would recommend putting it under the major chip card instead, and then drilling down to your specific chip. change the nth-child(1) to however many conditional chips you have. and then remember to drill down to your right chip type that is under your conditional chip.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.dishwasher
state: 'on'
chip:
type: template
entity: sensor.kitchen_dishwasher_plug_power
icon: mdi:dishwasher
icon_color: |-
#8489fa
content: |-
0h 0m
card-mod:
style: |
ha-card {
--chip-background: #001f5c;
}
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
animation courtesy of @rhysb 
Style Icon in Buttons
if you only have 1 single button on your card it can be accomplished to change the icon this way:
card_mod:
style:
mushroom-button$: |
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
{
problems arise when you have multiple buttons on the same card, as with this method only 1 will be styled.
You can get around this by doing the below:
card_mod:
style:
mushroom-button:nth-child(1):
$: |
:host {
background-color: red;
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Just increment the nth-child(1) by 1 for how many buttons you have on your mushroom card and then style them individually.
Style Dropdown
The text, background and icon in a dropdown can be styled like this:
card_mod:
style: |
:host {
--mdc-select-fill-color: lightblue;
--mdc-select-ink-color: blue;
--mdc-select-dropdown-icon-color: red;
}
unfortunately it doesnt seem like you can change the icon for the dropdowns. if anyone can find a way to change this, let me know and ill add it here
big thanks to @piitaya for creating such lovely looking cards that mostly you dont even need to do this with, because they are nice looking and customizable enough in the first place.
also a big thanks to @rhysb as always. a lot of the knowledge in here comes from him scattered across this forum.
Part 1 Part 2
48 Likes
UPDATE PLEASE READ THIS POST INSTEAD HERE.
Part 1 Part 2
Continued from Part 1 linked above. please read the original post first to understand what these code snippets are meant to help with.
TLDR, how to target certain elements of mushroom cards with Card Mod.
Also just wanted to add that alot of the time there is more than 1 way to complete these same things, and its hard to find out what the âbestâ way is. so if you find a way that you think is better/easier. let me know in a message
Style Other Buttons (Climate, Input Number, Cover, etc.
For some reason the buttons on the input number (and number selection on climate cards) are not the same type as the other buttons, so you have to target them slightly differently, but this can be accomplished as such:
Climate card (courtesy of @glyn). this also helped me figure out the other cards.
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: blue;
Input Number Card:
card_mod:
style:
mushroom-number-value-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: blue;
}
Cover Card (back to being similar to the other buttons, but still not exactly the same).
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Lock Card:
card_mod:
style:
mushroom-lock-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Update Card:
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Media Card:
card_mod:
style:
mushroom-media-player-media-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Sure this would also work for a Vacuum, Fan, and Humidifier cards. but unfortunately i dont have devices for these. my assumption is that it would work like the above but be like the below instead but until someone can verify for me i am not 100% sure:
Vacuum:
card_mod:
style:
mushroom-vacuum-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Fan:
card_mod:
style:
mushroom-fan-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Humidifier:
card_mod:
style:
mushroom-humidifier-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Style Text that isnt Primary or Secondary
You can style text that is outside the header of the card like this:
Climate Card:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .value{
font-family: 'Lucida Console';
font-size: 30px;
color: rgb(var(--rgb-green));
}
Input Number Card:
card_mod:
style:
mushroom-number-value-control$:
mushroom-input-number$: |
#container .value{
font-family: 'Lucida Console';
font-size: 30px;
color: rgb(var(--rgb-green));
}
etc. i am sure there are other cards with values that you could style.
Style Sliders
Light Slider (courtesy of @rhysb):
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Media Player:
card_mod:
style:
mushroom-media-player-volume-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Input Number:
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Cover Card:
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
etc. if there are any more card with sliders, i am sure you can figure it out. just inspect element and look at the name of the âmushroom-xxx-xxx-controlâ and use that as the name
And that is all i could think of for now to style. if you have any suggestions that could make for a Part 3. let me know
37 Likes
You should really make your own thread out of this! 
It is by far the best explanation for the newly updated versions. And in 7000 posts, even with the thread search function, it will likely be missed by many people. And honestly, it deserves its own thread. 
My suggestion would be, take the text from the posts above and just copy it to a new thread. No need to delete it here, itâs good to have it here as well. And post the link to that thread right here, so people find it.
But be aware, it will result in more questions to you. 
Just sayingâŚ
EDIT: if you want to, you can always post it under âCommunity Guidesâ, where others are able to edit the first post. just if you want to!
5 Likes
Good suggestion thank you. ill do that, when i do i will change the scope then slightly and go through each Card one by one instead so that people can see all of the options.
i think this might be more helpful if i am going to start a whole new thread about it
10 Likes
Good plan, Iâm waiting patiently for the link to the new thread
Is it possible to change the font ?
I want the velux type the same as the othersâŚ
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Screen Links
- type: 'custom:time-picker-card'
entity: input_datetime.velux_invoer_uur
hour_mode: 24
name: Velux wekker
First I need to know what is the font of the mushroom card to change the other card. So I think my question placed here is ok ?
Hello
Can I set the font/icon size on this card in card mod?
Is this a mushroom card? If not i would take this question to the card mod page. And if/when you do, post your yaml.
Can anyone help me to get the primary and secondary text for a Mushroom entity card onto the same line, rather than on top of each other? Iâm using card_mod but canât for the life of me work out how to do this.
This seems to work
type: custom:mushroom-title-card
title: Primary Title
subtitle: Some subtitle
card_mod:
style: |
ha-card > div {
display: inline-block;
}
Thanks for this. Worked for a title card, but didnât for an entity card 
Sorry, I misread it as the title card.
This should work for an entity card
card_mod:
style:
mushroom-state-info$: |
.container {
flex-direction: row !important;
align-items: baseline;
gap: 10px;
}
The .container element is a flexbox so I just changed it to row and added alignment and a gap between the children elements.
Here is some more info on flexbox A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
This worked! Thank you so much
Hi @Guizmos I really like this approach.
I have now configured a dashboard with this config and changed to use my own entities.
I do have some issues with popup cards, how do I get them to be transparent or the gray color you have? Mine is just the white popup.
Is this the Theme? what theme are you using?
I also have issues getting the swipe card background to change based on the media being played.
Thank you
Small breaking change for card mod animation with 3.0.5 release . It was necessary to clarify how to customize animation because there was multiple way to do it and some doesnât work for some browsers.
--icon-animation has been removed because it doesnât work on Safari iOS with custom animations.
If you want to customize icon animation, you must use ha-state-icon selector with animation property.
Example
card_mod:
style: |
ha-state-icon {
animation: spin infinite linear spin;
}
4 Likes
Thanks for the update! glad that i havent finished my guide yet
honestly this makes it easier now too as it will all be the same.