there is no nameā¦ its the entityās name look at the codeā¦ name never got called
Edit: it was primary_info: none
I love Mushroom cards, really slick looking stuff!
But Iām hoping someone might be able to help me with card-mod/CSS. I canāt seem to figure out how to change the color of the circle behind the icon (in this case, the light green circle behind the fan icon).
Here is my current YAML (which is not working):
type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.pure_cool_formaldehyde
name: Office Purifier
card_mod:
style: |
div.shape {
background-color: blue;
}
Any help would be super appreciated, thank you!
Thanks for the fast reply, but that just seems to hide the name:
Iām looking to change the color of the green circle behind the fan icon.
Sorry, I replied to the wrong post haha. Try this:
Change the ānone !importantā to the colour of your choice.
Something like this:
type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.pure_cool_formaldehyde
name: Office Purifier
card_mod:
style: |
mushroom-shape-icon {
--shape-color: purple !important;
}
Edit: add !important
1 Like
Thanks, but that didnāt work 
type: custom:mushroom-fan-card
entity: fan.eva_luftfukter
layout: vertical
icon_animation: true
secondary_info: none
style: |
mushroom-shape-icon{
--icon-color: rgb(var(--rgb-light-blue)) !important;
--shape-color: rgba(var(--rgb-light-blue), 0.2) !important;
}
This works for me
1 Like
You are AWESOME! Thank you!
Can I buy you a coffee?
Great!
Nah, just glad to help! 
Forgot to add !important. Works now.
Is it possible to have the iconcolor represent the current color of the light?
You could try -webkit-filter: grayscale(100%); instead.
The mushroom-light-card already has an option for that in the GUI. Look for the āUse light colorā option.
1 Like
Thanks for your response, but its the same result. browser is working, IOS is not.
but this cant be used in a template card i presume?Sure you can. Like this:
type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: |
{% set brightness = state_attr(entity, 'brightness') %}
{% if is_state(entity, 'on') %}
{{ (brightness / 255 * 100) | round(0) }}%
{% else %}
Off
{% endif %}
icon: mdi:lightbulb
entity: light.lounge_cabinet_light
card_mod:
style: |
mushroom-shape-icon {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
}
1 Like
Hey thanks alot, iām almost there! Is it possible to have the small(er) icons, those which display the specific entity āonā also represent the current color?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(''sensor.toon_current_temperature'') | round (0) }} Ā°C'
icon: mdi:desktop-tower-monitor
entity: light.geekroom
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_color: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone',
'on') %}
green
{% elif is_state
('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone', 'off') %}
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone',
'on') %}
mdi:motion-sensor
{% elif is_state
('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone', 'off') %}
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host {
--mush-icon-size: 60px;
height: 66px;
margin-left: -18px !important;
}
mushroom-shape-icon {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.nanoleaf
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:hexagon
- type: conditional
conditions:
- entity: light.lightstrip_upstairs
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:led-strip
- type: conditional
conditions:
- entity: light.desklamp
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:desk-lamp
- type: conditional
conditions:
- entity: light.hue_iris_1
state: 'on'
chip:
type: template
icon_color: yellow
icon: mdi:light-flood-up
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;
}
card_mod:
style: |
ha-card {
height: 102px;
background: url('/local/geekroom1.jpeg') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.8);
{% if is_state('light.geekroom', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}Is there an option in the climate card to control the oscillating mode of the air conditioner?
Yes! Itās somewhere in this thread, has already been discussed and (I believe) thereās examples for it aswell. Gl!