Damn didnt know that was possible, thanks!
I had the same issue with my TV, ideal volume is between 5-10% and volume buttons of the media card donāt show. So I created my own:
It requires 3 scripts that will run if you click one of those buttons, for (un)mute, volume down, and volume up.
Card
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: media_player.dummy_tv_01
primary: Samsung TV
secondary: |-
{% if is_state(entity, 'on') %}
Aan ā¢ {{(state_attr(entity,'volume_level')*100) | round()}}%
{% elif is_state(entity, 'idle') %}
Aan ā¢ {{(state_attr(entity,'volume_level')*100) | round()}}%
{% else %}
Uit
{% endif %}
icon: mdi:television
icon_color: |-
{% if is_state(entity, 'on') %}
red
{% elif is_state(entity, 'idle') %}
red
{% else %}
disabled
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
content: ''
icon: >-
{% if state_attr('media_player.dummy_tv_01', 'is_volume_muted') ==
true %}
mdi:volume-off
{% else %}
mdi:volume-high
{% endif %}
tap_action:
action: call-service
service: script.samsung_tv_volume_mute
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: template
content: ''
icon: mdi:volume-minus
tap_action:
action: call-service
service: script.samsung_tv_volume_down
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: template
content: ''
icon: mdi:volume-plus
tap_action:
action: call-service
service: script.samsung_tv_volume_up
card_mod:
style: |
ha-card {
box-shadow: none;
}
alignment: center
card_mod:
style: |
ha-card {
margin: 0px 12px 12px;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 42px;
--chip-padding: 32px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
}
Script for (un)mute
alias: Samsung TV volume mute
sequence:
- if:
- condition: state
entity_id: media_player.dummy_tv_01
attribute: is_volume_muted
state: true
then:
- service: media_player.volume_mute
data:
is_volume_muted: false
target:
entity_id: media_player.dummy_tv_01
else:
- service: media_player.volume_mute
data:
is_volume_muted: true
target:
entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-mute
Script for volume down
alias: Samsung TV volume down
sequence:
- if:
- condition: state
entity_id: media_player.dummy_tv_01
attribute: volume_level
state: 0
then:
- service: media_player.volume_set
data:
volume_level: "0"
target:
entity_id: media_player.dummy_tv_01
else:
- service: media_player.volume_set
data:
volume_level: >-
{{state_attr("media_player.dummy_tv_01", "volume_level")|float - 0.01}}
target:
entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-minus
Script for volume up
alias: Samsung TV volume up
sequence:
- service: media_player.volume_set
data:
volume_level: >-
{{state_attr("media_player.dummy_tv_01", "volume_level")|float + 0.01}}
target:
entity_id: media_player.dummy_tv_01
mode: single
icon: mdi:volume-plus
Youāll have to replace all the media_player.dummy_tv_01 with your Sonos speaker. Not sure if other variables are the same with my TV as your speaker, but hope this helps.
2 Likes
Something like this. You can fill in your sensor names in the secondary part and your switch entity.
type: custom:mushroom-template-card
entity: switch.power_plug
primary: Hot Water
secondary: |-
{% if is_state(entity, 'on') %}
On ā¢ {{states('sensor.power_usage')}} W ā¢ {{states('sensor.some_other_sensor')}} kWh
{% elif is_state(entity, 'off') %}
Off
{% else %}
Unavailable
{% endif %}
icon: |-
{% if is_state(entity, 'on') %}
mdi:power-plug
{% elif is_state(entity, 'off') %}
mdi:power-plug-off
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if is_state(entity, 'on') %}
amber
{% elif is_state(entity, 'off') %}
disabled
{% else %}
disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{{ 'background: rgba(var(--mush-rgb-amber), 0.2);' if is_state(config.entity, 'on') }}
}
3 Likes
Thank you! 
Can anyone help point me in the right direction here?
I think Iāve cracked it:
bar-card-value::before {
content: " {{ states.sensor.saltlevel_in_percent.state }} % / ";
}
1 Like
hi all,
I was looking for a way to change the background color (opacity) of my mushroom card slider without success, Iām quite new to this (code in general, started HA a few weeks ago) and I need a little help with the next step.
First I found ārgb-disabled, this one works in the code below and gives me the option to change the color, but unfortunately not the opacity/transparency.
I used the āinspectā/ (DOM?) option for the first time to figure out what declaration I need to change and found it: ābgācolor-inactive. tried changing it in the DOM function of chrome and it does exactly what I want to achieve.
Until now I have been unsuccessful implementing it though. Using DOM I found ābgācolor-inactive was inherited from mushroom-slider,
so I tried:
style: |
mushroom-light-brightness-control {
--slider-color: rgb(255,166,87) !important;
--slider-bg-color: rgba(255,166,87, 0.8) !important;
--rgb-disabled: 255,166,87 !important;
}
mushroom-slider {
--bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
}
ha-card {
background: rgba(225,225,225,0);
border: rgba(225,225,225,0);
}
this did not work, so i used :host as the declaration is mentioned under :host within mushroom-slider, did not work either:
style: |
mushroom-light-brightness-control {
--slider-color: rgb(255,166,87) !important;
--slider-bg-color: rgba(255,166,87, 0.8) !important;
--rgb-disabled: 255,166,87 !important;
}
:host {
--bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
}
ha-card {
background: rgba(225,225,225,0);
border: rgba(225,225,225,0);
}
Tried it in the light-brightness-control, no luck:
style: |
mushroom-light-brightness-control {
--slider-color: rgb(255,166,87) !important;
--slider-bg-color: rgba(255,166,87, 0.8) !important;
--rgb-disabled: 255,166,87 !important;
--bg-color-inactive: rgba(var(--rgb-disabled), 0.8) !important;
}
ha-card {
background: rgba(225,225,225,0);
border: rgba(225,225,225,0);
}
Can anybody help me understand what Iām doing wrong? how I can implement the declarations I found using DOM?
Edit: Just had a brain-fart, should I be using card-mod because of the variable?
p.s. I donāt know when to use !important so at the moment I just put it everywhere.
Looking Good!!
This is exactly what I was looking for. Thanks for your sharing! 
Can you also share the relevant scripts that you use with this card?
Looking Great!
How did you create this sensor?
Hmm - an issue with 2023.1 I guess since Mushroom Cards version last changed in November. Is the best way to use mapper as suggested, wait and see if this gets fixed or figure out where to log this as a bug?
1 Like
To change the slider background when active and inactive you need to go a bit deeper, like this:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-bg-color: rgba(var(--rgb-state-light), 0.5);
--bg-color-inactive: rgba(var(--rgb-disabled), 0.5);
}
4 Likes
If the change has been merged then it will be included in the next update of Mushroom.
In the meantime, if you are wanting to change the default color of the Mushroom Light Card you can add mush-rgb-state-light: var(--rgb-amber-color) to your theme file. If you want to change it for a specific card you can use card_mod like this:
type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
style: |
:host {
--mush-rgb-state-light: var(--rgb-amber-color)
}
2 Likes
Hi,
Did you solve this?
I have the same problem on mine and just solved it.
You have to find the fan_modes on you climate entity.
For mine I replaced this:
fan:
Auto low:
name: Auto
icon: mdi:fan-auto
Low:
name: 'On'
icon: mdi:fan
with this:
fan:
auto:
name: Auto
icon: mdi:fan-auto
turbo:
name: Turbo
icon: mdi:fan-speed-3
high: false
medium: false
low:
name: Low
icon: mdi:fan-speed-1
Hello,
@rhysb could you please give me any tip about editing your Room card? My problem [no2] was described in this post:
Blockquote
[ā¦] 2. I would like to edit Rhysā room card, so that I could switch specific light entities by pressing an icon displayed at the bottom of the card. I am able to add an interactive icon to that card, but it is being displayed at its right side and I would like it to be positioned on the left. When I add ātoogle chipā after alignment: end it interferes with those conditional ones, made by the author. @rhysb could you please tell me how could I add such icon? Iām sending an example in the attachment. I would like the toogle icon to be placed in the place of red dot. [ā¦]
Best regards,
Jakub
1 Like
hey man,
may not be a perfect though
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: HA Server
secondary: 'Uptime: {{ states(''sensor.ha_uptime_phrase'') }}'
icon: mdi:server-network
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.nas_temperature
icon: mdi:chip
icon_color: |
{% if states('sensor.nas_temperature') | float < 0 %}
blue
{% elif states('sensor.nas_temperature') | float < 5 %}
white
{% elif states('sensor.nas_temperature') | float < 10 %}
green
{% elif states('sensor.nas_temperature') | float > 10 %}
yellow
{% elif states('sensor.nas_temperature') | float > 25 %}
orange
{% elif states('sensor.nas_temperature') | float > 30 %}
red
{% else %}
green
{% endif %}
alignment: end
1 Like
Thanks for the example. I have my NAS card sorted now and Iām trying to use the same logic for a UPS card but the icon is not getting any colour at all and I canāt see what Iāve done wrongā¦
code for the first chip
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ups_input_voltage
content: 'Input: {{ states(entity) }} V'
icon: mdi:power
icon_color: |
{% if states('sensor.ups_input_voltage') | int < 230 %}
red
{% if states('sensor.ups_input_voltage') | int < 235 %}
orange
{% elif states('sensor.ups_input_voltage') | int > 235 %}
green
{% elif states('sensor.ups_input_voltage') | int > 242 %}
red
{% else %}
red
{% endif %}
1 Like
You have two ifās. Should be:
{% if states('sensor.ups_input_voltage') | int < 230 %}
red
{% elif states('sensor.ups_input_voltage') | int < 235 %}
orange
{% elif states('sensor.ups_input_voltage') | int > 235 %}
green
{% elif states('sensor.ups_input_voltage') | int > 242 %}
red
{% else %}
red
{% endif %}
1 Like
Oops! Good old copy/paste error. Thanks!
1 Like
Hey Jakub, you could do that like this.
Mushroom Room Card with Light Toggle:
Mushroom Room Card with Light Toggle YAML
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lounge
secondary: '{{ states("sensor.lounge_sensor_temperature") | round(0) }} Ā°C'
icon: mdi:sofa
entity: light.lounge_light
tap_action:
action: navigate
navigation_path: lounge
hold_action:
action: toggle
icon_color: '{{ ''red'' if is_state(entity, ''on'') }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.pipe_man
content_info: none
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.lounge_motion_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.lounge_tv
state_not: 'off'
- entity: media_player.lounge_tv
state_not: idle
- entity: media_player.lounge_tv
state_not: unavailable
chip:
type: template
entity: media_player.lounge_tv
icon_color: disabled
icon: |-
{% set media_type = state_attr(config.entity,
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-roll
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 1; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- type: conditional
conditions:
- entity: climate.air_conditioner
state_not: 'off'
chip:
type: template
entity: climate.air_conditioner
icon_color: disabled
icon: |-
{% if is_state(entity, 'heat_cool') %}
mdi:sync
{% elif is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:air-conditioner
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'heat_cool') %}
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
50% { opacity: 0.4; }
}
@keyframes dry {
50% { transform: scale(1.2); }
}
- type: conditional
conditions:
- entity: group.lounge_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.lounge_light', 'on') %}
background: rgba(var(--rgb-red-color), 0.1);
{% endif %}
}
3 Likes