Can you post the yaml for the entire card? My first suggestion would be to put the card_mod under the specific card you are trying to style instead of the combined card.
But until i see full yaml i wont be able to help.
Hereās the full code for the card.
Iām using the card mod just in the mushroom light card.
type: custom:mushroom-light-card
entity: light.range
name: Range
icon: mdi:led-strip-variant
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: false
layout: horizontal
primary_info: name
card_mod:
style: |
:host {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} mdi:motion-sensor
{% else %} mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %} orange
{% else %} lightgrey
{% endif %};
}
i think this works?
type: custom:mushroom-light-card
entity: light.range
name: Range
icon: mdi:led-strip-variant
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: false
layout: horizontal
primary_info: name
card_mod:
style: |
ha-state-icon {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
orange
{% else %}
lightgrey
{% endif %};
}
This works because the second āiconā is considered a button so is not covered under ha-state-icon.
ha-state-icon:
ha-icon (under button).
But yes. using host would just change all icons in the card.
So for reference for anyone else in the future. if you wanted to style the icon of the button ONLY. then it would be like this:
card_mod:
style:
mushroom-button$:
button: |
ha-icon {
--card-mod-icon:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %};
--card-mod-icon-color:
{% if states('binary_sensor.range_motion_occupancy') == 'on' %}
orange
{% else %}
lightgrey
{% endif %};
}
This was a good challenge btw 
3 Likes
This of course worked, amazing! Thankyou.
How did you interrogate the elements? are those screenshots from a browser console?
Hi All,
Is it correct that the mushroom cards not using the icon-color set when using customise in HA?
---
###########################################################################################
# CUSTOMIZE_GLOBAL
# https://www.home-assistant.io/docs/configuration/customizing-devices
###########################################################################################
"switch.*":
templates:
icon_color: if (state === 'on') return '#1E90FF'; return 'black';
Using normal entity card the icon is black when off and blue when on.
in mushroom-entity-card the icon is light grey when off and also blue when on.
If this is a normal behaviour then I donāt need to search where this go wrongā¦ 
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 