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
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. 
