Conditional styles:
Styles can be set dynamically dependingly on some conditions (like some entity’s state) with the help of "card-mod":
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
- type: picture-elements
card_mod:
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
--my-state-color: magenta;
--my-transform-style: translate(-50%,-50%) rotate(-0.25turn);
{% else %}
--my-state-color: cyan;
--my-transform-style: translate(-50%,-50%)
{% endif %}
}
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
top: 8%
left: 20%
'--label-badge-background-color': var(--my-state-color)
transform: var(--my-transform-style)
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 28%
left: 20%
'--paper-item-icon-color': var(--my-state-color)
transform: var(--my-transform-style)
- type: icon
icon: mdi:car
style:
top: 38%
left: 20%
color: var(--my-state-color)
transform: var(--my-transform-style)
- type: state-label
entity: sensor.cleargrass_1_co2
style:
top: 52%
left: 20%
color: var(--my-state-color)
transform: var(--my-transform-style)
- type: service-button
title: Command
service: homeassistant.update_entity
service_data:
entity_id: sun.sun
style:
top: 70%
left: 20%
'--mdc-theme-primary': var(--my-state-color)
transform: var(--my-transform-style)
- type: image
image: /local/images/small_pic.jpg
style:
top: 90%
left: 20%
transform: var(--my-transform-style)
image: /local/images/white.jpg
Important note: this method CANNOT be used to define dynamically other options like “image”, “entity” etc.
Also: there are 2 ways:
- Declare a variable on a picture-elements card’s level - then this variable may be used for a few elements.
- Declare a variable on some element’s level - to use this variable for this element only.