today I found myself struggling using a card variables inside a cards background css gradient. I did mange to use it in the end, but it took an intermediate variable I had to declare on the element itself.
I had hoped to do something like:
- background: radial-gradient(variables.severity_color ,skyblue)
but that wont work, nor some of the version I tried with ${variables.severity_color} inside a html format.
Feels a bit clunky to have a global variables set, and not be able to use it directly in one of the options, but need to ‘return’ it first to a new variable.
Please have a look what I did wrong/how this could be fixed If at all?
thanks!
type: custom:button-card
template: button_summary
entity: sensor.schimmel_sensor
name: Schimmel
variables:
active: >
[[[ return states['binary_sensor.schimmel_alert'].state === 'on'; ]]]
severity_color: >
[[[ var mold = entity.state;
if (mold > 80) return 'red';
if (mold > 70) return 'crimson';
if (mold > 65) return 'orange';
return 'green'; ]]]
hold_action:
action: navigate
navigation_path: /ui-data/klimaat
state:
- operator: template
value: >
[[[ return variables.active;]]]
spin: true
styles:
card:
- color: var(--primary-color)
- --card-color: >
[[[ return variables.severity_color; ]]]
## wanted to use the variables.severity_color inside the background here
- background: radial-gradient(var(--card-color) ,skyblue)
icon:
- color: >
[[[ return variables.severity_color; ]]]