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
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.
Thanks for your response, but its the same result. browser is working, IOS is not.
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;
}
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!
iāve finally finished my vacuum card
i saw some examples in this thread - all beautiful ! but I don;t want to have an interactive map
here is my view, all icons and states and written as templates, changing the dustbox or mode, changes the icon etc
Iām super happy 
I tried searching this thread before posting,
But I didnāt findā¦ 
I would appreciate it if someone could direct meā¦
How do i remove the auto-entities and the boolean, so i can just make something similar but just manually assigning lights?
Hi Rhysb
Do you know how can we achieve the function of back chip with a template or anything else? I am trying to configure heading for my pages like this :
type: custom:layout-card
layout_type: custom:masonry-layout
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:banner-card
color: white
entities: null
heading:
- Yatak Odası
link: window.history.back()
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
margin-top: -20px;
margin-left: -5px;
width: 300px;
}
ha-card .heading {
font-size: 3.5em;
margin: 40px;
color: black;
font-family: 'Amatic SC', cursive;
margin-left: 6px;
}
ha-card .overlay-strip {
font-size: 1em;
font-family: 'Roboto';
font-weight: 900;
background: none;
margin-left: 6px;
}
- type: custom:mushroom-chips-card
chips:
- type: back
alignment: end
card_mod:
style: |
ha-card {
margin: 10px -1px 0 0
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
width: 350px
}
I want to go back to the previous page when clicked on āYatak Odasıā header.
And also how can I position āback chipā in the code to the left of the heading. Currently it is on the right but when I place it to the left the heading gets smaller.
I have a problem with toggling a light from a template card. Lights always turn on at 1% brightness unless I hardcode a brightness value in the template. Hope somebody has a solution.
When I use the light card the light is toggled on and off to the intial brightness. So if the light is at 25% when it is toggled off and on again, the light stays at 25%.
However, if I do the same with the template card, the light doesnāt turn on at 25% but at 1%. Any ideas?
