This will work:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.office_desk_lamp
icon: mdi:home
card_mod:
style: |
ha-card {
box-shadow: 0 0 10px 5px rgb{{state_attr(config.entity,'rgb_color')}};
}
Just keep in mind that this only works if your light supports rgb_color
as an attribute.
if you want to have a check first and then set a default color if it doesnt support it you can do this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.office_desk_lamp
icon: mdi:home
card_mod:
style: |
ha-card {
{% if state_attr(config.entity, 'rgb_color') != none %}
box-shadow: 0 0 10px 5px rgb{{state_attr(config.entity,'rgb_color')}};
{% else %}
box-shadow: 0 0 10px 5px rgb(255, 150, 40);
{% endif %}
}
checks if rgb_color
is not equal to none
and then applies the rgb_color
if it is none applies a default color you can set yourself
if you want to control the light intensity (perhaps in line with brightness set) you can do this:
50% brightness, on a light that doesnt support rgb_color
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.kitchen_down_light_1
icon: mdi:home
card_mod:
style: |
ha-card {
{% if state_attr(config.entity, 'rgb_color') != none %}
box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color') + (state_attr(config.entity,'brightness') / 2.55 / 100,)}};
{% else %}
box-shadow: 0 0 10px 5px rgba(255, 150, 40, {{state_attr(config.entity,'brightness') / 2.55 / 100}});
{% endif %}
}
But again, your light needs to support the brightness
attribute, so we can build in another check again like this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
entity: light.kitchen_down_light_1
icon: mdi:home
card_mod:
style: |
ha-card {
{% if state_attr(config.entity, 'rgb_color') != none and state_attr(config.entity, 'brigtness') != none %}
/* if both color and brightness supported */
box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color') + (state_attr(config.entity,'brightness') / 2.55 / 100,)}};
{% elif state_attr(config.entity, 'rgb_color') == none %}
/* if only brightness supported */
box-shadow: 0 0 10px 5px rgba(255, 150, 40, {{state_attr(config.entity,'brightness') / 2.55 / 100}});
{% elif state_attr(config.entity, 'brightness') == none %}
/* if only color supported (never seen this in my life) */
box-shadow: 0 0 10px 5px rgba{{state_attr(config.entity,'rgb_color')}};
{% else %}
/* if neither color or brighness supported */
box-shadow: 0 0 10px 5px rgba(255, 150, 40, 1);
{% endif %}
}