Yes, you can change the Chip text and icon color like this:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
content: Mushrooms
card_mod:
style: |
ha-card {
--text-color: rgb(var(--rgb-green));
--color: rgb(var(--rgb-red));
}
Try like this:
Use --color for on color and --icon-color for off color.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.office_light
card_mod:
style: |
ha-card {
--color: rgb(var(--rgb-yellow));
--icon-color: rgb(var(--rgb-disabled));
}
Yes, you can add a shadow to the Mushroom icon shape like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16) !important;
}
Hi Rhys,
can you explain to me how to do that with the title on the card that Now Playing is only displayed when media is also playing?
I have my media player only shown on the home page when something is playing and can also assign a title of the card but this is then always shown even if nothing is played.
Thanks a lot
And my absolute respect how great you liven up this thread here and are always helpful.
Greetings
Moss
You can replace the secondary text of a non-template Mushroom card like this:
type: custom:mushroom-entity-card
entity: sensor.lounge_sensor_temperature
card_mod:
style:
mushroom-state-info$: |
.secondary {
font-size: 0px !important;
}
.secondary:before {
content: "{{ states(config.entity) | round(1) }} °C";
font-size: var(--card-secondary-font-size);
}
I combine all my media players using a Universal Media Player:
media_player:
- platform: universal
name: Currently Playing
children:
- media_player.lounge_tv
- media_player.lounge
- media_player.family_room_tv
- media_player.family_room
- media_player.office
- media_player.bedroom
- media_player.garage
- media_player.elijahs_bedroom
I then conditionally display the Universal Media Player when it is not off:
type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
card:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Currently Playing
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ state_attr(state_attr(config.entity, "active_child"), "friendly_name") }} - ";
}
.: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 0px 0px;
--mmp-progress-height: 8px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.currently_playing', 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
}
view_layout: {}
Thank you for your kind words 
Apologies if this has been discussed before. Does anyone else feel the need for more visual feedback when a mushroom entity card is tapped? The standard HA button has the ripple effect when you tap it, and I kind of miss that with Mushroom. It’s not so bad on iPhone, where you get haptic feedback, but on iPad it would be nice to have that extra feedback.
You may be trying to re-invent the wheel here. You can make the Mushroom Media Card into a dedicated volume control very easily:
type: custom:mushroom-media-player-card
entity: media_player.family_room
show_volume_level: true
volume_controls:
- volume_set
- volume_mute
use_media_info: false
card_mod:
style: |
mushroom-shape-icon {
{% set vol_level = state_attr(config.entity, 'volume_level') | float %}
--card-mod-icon:
{% if state_attr(config.entity, 'is_volume_muted') == true %}
mdi:volume-mute
{% else %}
{% if vol_level > 0.66 %}
mdi:volume-high
{% elif vol_level < 0.33 %}
mdi:volume-low
{% else %}
mdi:volume-medium
{% endif %}
{% endif %};
}
Here are some ideas for visual feedback when you ‘activate’ a Mushroom card:
Background
(I tried to keep the effect subtle so it’s a bit hard to see in the GIF)
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Background
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transition: 0s;
}
Box-Shadow:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Box-Shadow
card_mod:
style: |
ha-card:active {
box-shadow: 0 0 20px rgba(var(--rgb-grey), 0.5);
transition: 0s;
}
Scale:
type: custom:mushroom-template-card
primary: Activate Mushroom
icon: mdi:mushroom
icon_color: red
secondary: Scale
card_mod:
style: |
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
this is really nice…
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.cpu
icon: mdi:thermometer
icon_color: '{{ "green" if states("sensor.cpu") | int < 55 else "red" }}'
card_mod:
style: >
mushroom-shape-icon {
--icon-symbol-size: 20px;
--icon-size: 35px;
display: flex;
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
I am trying to change the cooler of the icon to green if cpu temp is less than 55 else red, also trying to make the icon to blink. What am I doing wrong ?
kindly guide
You need to use a template chip. Entity chip does not allow Jinja. CSS you have used is for a Mushroom card not a Mushroom Chip.
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.processor_use_percent
icon: mdi:thermometer
icon_color: '{{ "green" if states(entity) | int < 55 else "red" }}'
content: '{{ states(entity) }} %'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% {
opacity: 0
}
}
I was using template earlier but then it wasn’t showing the scale of the temperature Celsius or fahrenheit.is there a way to automatically show that in template.
Also the chip icon is not blinking.
Kindly help
Yes, content: '{{ states(entity) }} °C' should do the trick.
Done
thanks a lot… 
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: ''
icon: mdi:wifi-alert
icon_color: red
content: >
{% set val =
(states("sensor.fiber").split(",")[2]|float)/100*states("sensor.fiber").split(",")[1]|float+states("sensor.fiber").split(",")[1]|float
%} {% set recharge =
strptime(states("sensor.fiber").split(",")[0],'%d-%m-%Y') +
timedelta(states("sensor.fiber").split(",")[3]|int) %} {% set dl =
recharge.date() - now().date() %} {{ (dl.days)}} days
tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1)$: >
{% set val =
(states("sensor.fiber").split(",")[2]|float)/100*states("sensor.fiber").split(",")[1]|float+states("sensor.fiber").split(",")[1]|float
%} {% set recharge =
strptime(states("sensor.fiber").split(",")[0],'%d-%m-%Y') +
timedelta(states("sensor.fiber").split(",")[3]|int) %} {% set dl
=
recharge.date() - now().date() %}
ha-icon {
{% if dl.days <=5 and dl.days >=1 %}
animation: blink 4s linear infinite;
{% else %}
animation: blink 1s linear infinite;
{% endif %}
}
@keyframes blink {
50% {
opacity: 0
}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
}
where to use the below style correctly in the above code ? The place where I am using has not effect
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
Kindly help
@rhysb Your contributions are invaluable. Thank you! I might put in an enhancement request for an animation of some sort as an option. That and being able to colour title text. It gets a bit laborious putting all this card_mod code on every single Mushroom card! I understand the need to keep things simple, but I think there is room for a few more options. Might be just me though. The cards are incredibly useful as is.
You can add global CSS to your theme using Card-Mod:
Mushroom Custom:
card-mod-theme: "Mushroom Custom"
card-mod-card: |
ha-card:active {
transform: scale(1.02);
}
Try like this:
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
Oh wow, you live and learn (especially when it comes to HA!). Thanks. I suppose doing this would affect any non-Mushroom cards too?
I do find, though, that with those mods for visual feedback, if you tap the card quickly you don’t see much. Tap a little longer (but less than a long tap), and you see the effect. Is there a way to make that more responsive, and also a way to have the standard HA button ripple effect? Sorry, new to all the card-modding stuff!