Question:
Is it possible to inject state or state attribute into CSS? I want to show both the icon animation and have the gradient background linked to an attribute, in this case the battery level of my vacuum. Any ideas as to how I can achieve this?
For example this works for card gradient background in vanilla button with card-mod but doesn’t in button-card. Using {{state_attr('vacuum.dustin', 'battery_level')}}%
in place of set percentage.
Working code for vanilla button with card mod (but can’t animate icon):
type: button
icon: mdi:robot-vacuum
entity: sensor.dustin_battery
name: battery level background gradient
show_state: true
show_icon: true
card_mod:
style: |
ha-card {
--ha-card-background: linear-gradient(0deg, rgba(46.7,46.7,46.7,1) 0%,
rgba(46.7,46.7,46.7,1) {{state_attr('vacuum.dustin', 'battery_level')}}%,
rgba(92,24,215,1) 100%)
}
This works fine with hardcoded percentage @ 50%, see image:
type: custom:button-card
icon: mdi:robot-vacuum
extra_styles: |
@keyframes charge {
75% {color: cyan;}
styles:
icon:
- animation: charge 5.25s ease-in infinite
card:
- background: >-
linear-gradient(0deg, rgba(46.7,46.7,46.7,1) 0%,
rgba(46.7,46.7,46.7,1) 50%,
rgba(92,24,215,1) 100%)
This does not work:
type: custom:button-card
icon: mdi:robot-vacuum
extra_styles: |
@keyframes charge {
75% {color: cyan;}
styles:
icon:
- animation: charge 5.25s ease-in infinite
card:
- background: >-
linear-gradient(0deg, rgba(46.7,46.7,46.7,1) 0%,
rgba(46.7,46.7,46.7,1) {{state_attr('vacuum.dustin', 'battery_level')}}%,
rgba(92,24,215,1) 100%)
Thanks in advance.