You can using --mush-rgb-state-media-player, like this:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon_type: none
primary_info: none
secondary_info: none
volume_controls:
- volume_set
card_mod:
style: |
:host {
--mush-rgb-state-media-player: var(--rgb-green);
}
Have a look here:
Sure.
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Theatre
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Projector
secondary: >-
{{ states((entity)) | title }} {% if is_state_attr((entity),
'current_activity', 'PowerOff') %} {% else %}
- {{ state_attr((entity), 'current_activity') | replace('4K','') }}
{% endif %}
icon: mdi:television
icon_color: '{{ ''disabled'' if is_state((entity), ''off'') else ''blue'' }}'
entity: remote.theatre_room
card_mod:
style: |
ha-card:active {
background: rgba(var(--rgb-disabled), 0.1);
transform: scale(0.985);
transition: 0s;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.theatre_room_apple_tv_4k
icon_color: green
icon: mdi:apple
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: switch.theatre_room_ben_pc
icon_color: green
icon: mdi:face-man
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: switch.theatre_room_boys_pc
icon_color: green
icon: mdi:one-up
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: switch.theatre_room_cast
icon_color: green
icon: mdi:cast
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: rgba(var({{ '--rgb-green' if is_state(config.entity, 'on') else '--rgb-primary-text-color' }}), 0.1);
--icon-color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: sensor.theatre_activity
state: Apple TV 4K
- entity: remote.theatre
state_not: idle
card:
type: custom:mini-media-player
icon: mdi:apple
artwork: cover
source: icon
info: scroll
hide:
icon: true
name: true
power: true
volume: true
source: true
entity: media_player.theatre
- type: conditional
conditions:
- entity: remote.theatre_room
state: 'on'
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Volume
secondary: '{{ (state_attr(entity, ''volume_level'') * 100) | round(0) }}%'
icon: mdi:volume-high
entity: media_player.marantz_sr5013
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ (state_attr(config.entity, 'volume_level') | float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: custom:mushroom-media-player-card
entity: media_player.marantz_sr5013
icon_type: none
primary_info: none
secondary_info: none
icon_color: blue
volume_controls:
- volume_set
card_mod:
style: |
:host {
--mush-rgb-state-media-player: var(--rgb-{{ config.icon_color }});
}
hi, is it possible to use mdi:icon as shown by the arrow? (secondary info)
Fantastic!
I use that in a group, but when only dimmable lights are on it shows a white color.
Can you make it show yellow then instead?
Thanks so much for your help
Hi all!
I really want to remove the shadow on the sides of the chips. I have accomplished it with every card, exept op the chips. I use this code, can someone tell me what I do wrong?
style: |
ha-card {
box-shadow: none;
border: solid 0px rgba(100,100,100,0.3);
font-family: Arial, Helvetica, sans-serif
}
Is there a way to overwrite what is called when pushing the āplayā-button of a vacuum card?
I would like to call a script instead.
you can use template card and build buttons for everything you want, including āPlayā with a sript
must have missed this somewhere above, but creating domain counters, I noticed that
{{states.air_quality|count}}'
whihc I dont have, but shows a fine 0 in dev tools:
results in an empty mushroom secondary line:
- type: custom:mushroom-template-card
layout: vertical
primary: Air quality
secondary: '{{states.air_quality|count}}'
icon: mdi:air-filter
?
also, what would be the reason the var(āprimary-color)mis not supported ?
- primary: Air quality
secondary: '{{states.air_quality|count}}'
icon: mdi:air-filter
<<: &mushroom_template
type: custom:mushroom-template-card
icon_color: var(--primary-color)
fill_container: true
tap_action:
action: none
layout: vertical
showing all black icons. Hope not the old color issue introduced some HA version ago?
no desire to have action we can set tap/hold_action to none, but that still shows the handle. so here we go, we need yet another card_mod:
card_mod:
style: |
ha-card {
pointer-events: none;
}
maybe I can set the primary-color to the icon too that way?
considering this is a template card, I tried
icon_color: "{{'var(--primary-color)'}}"
but that wont go either, where a plain color name is supported.
nasty bug there
Hello Iāve been formating my mushroom cards with the following properties to get some white transparency and borderless:
card_mod:
style: |
ha-card {
--ha-card-background: rgba(255,255,255,0.05);
--ha-card-border-width: 0px;
}
however this seems to not work my mushroom chips. Is there anything Iām missing?
Hey rhysb,
I tried to make this collabsible when the entity is on or in use
my setup
- type: custom:mushroom-template-card
entity: sensor.washing_machine_status
primary: ''
secondary: |
{% if is_state(config.entity, 'arbeitet') %}
Wash
{% else %}
{% endif %}
icon: mdi:washing-machine
layout: vertical
icon_color: red
tap_action:
action: none
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 62px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
- type: custom:mushroom-template-card
entity: switch.wohnzimmer_fernsehen
primary: ''
secondary: |
{% if is_state(config.entity, 'on') %}
TV
{% else %}
{% endif %}
icon: mdi:television
layout: vertical
icon_color: cyan
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 58px;
--spacing: 8px;
{{ 'padding-bottom: calc(var(--spacing) * 1.618) !important;' if config.secondary != '' }}
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
}
but when entity is not in use it is not fully rounded do you have an idea?
If I want another item to change colour, for example this icon. How do I know which tag I should use? (you used --mush-rgb-state-media-player: var(--rgb-green); for the volume bar)
If I remember correctly, you must add a dot or comma (donāt remember which one) after the zero (i.e. the result of your template) in the mushroom secondary info, for a zero to actually show.
Did you try rgb(var(--primary-color))?
Did you figure this out? would like to use this for my RGB hue lights
Just remove the primary: ''. It is causing a padding-bottom to be added. 
As @ArenaCloser suggested add a , to show the 0:
type: custom:mushroom-template-card
primary: Air Quality
secondary: '{{ states.air_quality | count }},'
icon-color needs to be an RGB value. Fortunately there is a RGB value for Primary Color that we can use, --rgb-primary-color.
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: var(--rgb-primary-color)
You would need to inspect the CSS in your browser dev tools.
The --mush-rgb-state-media-player variable will change the color for the entire card. If you want to change them separately, then you would need to find the correct selector. For changing the Icon the selector is mushroom-shape-icon and the variable is --rgb-state-media-player:
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
show_volume_level: false
volume_controls:
- volume_set
use_media_info: true
card_mod:
style: |
mushroom-shape-icon {
--rgb-state-media-player: var(--rgb-green)
}
Not yet. Iām not very good at this, so maybe someone can help us 
Thanks!
Will add . Is that a bug btw? It should simply return the templates value .
On the colors: that is too bad really, my themes donāt use rgb valuesā¦ I want to set something like var(āicon-color-off) ā¦
Maybe I need to add whole set of mushroom variables per themeā¦ which beats the whole idea of these theme variables in the first place . Duplicating them .
Anyways, thanks for your continued support here , much appreciated
So this is causing my brain to itch. Same media player code but the player inside the stack-in-card seems to have the background set to transparent and I canāt work out where to override it.
- square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: template
icon: mdi:new-box
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 20px !important;
position: absolute;
top: 0px;
left: 75px;
overflow: visible !important;
white-space: normal !important;
}
mushroom-shape-icon$: |
.shape {
left: -30px;
top: -0px;
{% if is_state('switch.template_tv', 'on') %}
--shape-color: rgba(var(--rgb-blue), 0.5);
--icon-color: rgba(var(--rgb-white), 1);
{% elif is_state('light.template_carriage_leds', 'on') %}
--shape-color: rgba(var(--rgb-orange), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% elif is_state('light.template', 'on') %}
--shape-color: rgba(var(--rgb-orange), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% endif %}
}
.: |
:host {
--mush-icon-size: 120px;
--primary-text-color: #a0a0a0
}
ha-card {
height: 75px !important;
}
- type: custom:stack-in-card
cards:
- type: conditional
conditions:
- entity: media_player.kodi_living_room
state: 'playing'
card:
type: custom:mushroom-media-player-card
entity: media_player.kodi_living_room
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
}
card_mod:
style: |
:host {
--ha-card-box-shadow: 0px;
--ha-card-border-radius: 0px
}
- type: grid
square: false
columns: 1
cards:
- type: conditional
conditions:
- entity: media_player.kodi_living_room
state: 'playing'
card:
type: custom:mushroom-media-player-card
entity: media_player.kodi_living_room
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
}