Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Lovelace] Style entity icons based on state
# It should be possible to add these CSS variables to your
# frontend theme instead of in the card configuration.
- type: glance
title: Network Devices
columns: 4
show_icon: true
show_name: true
show_state: false
style:
.: |
ha-card {
--state-home-color: #2ecc40;
--state-not_home-color: #ff4136;
}
.entity:
$:
state-badge:
$: |
ha-icon[data-domain="device_tracker"][data-state="home"] {
color: var(--state-home-color);
}
ha-icon[data-domain="device_tracker"][data-state="not_home"] {
color: var(--state-not_home-color);
}
entities:
- entity: device_tracker.net_apple_tv
- entity: device_tracker.net_arlo_bridge
- entity: device_tracker.net_broadlink
- entity: device_tracker.net_counter_lights
# It should be possible to add these CSS variables to your
# frontend theme instead of in the card configuration.
- type: glance
title: Network Devices
columns: 4
show_icon: true
show_name: true
show_state: false
style: |
ha-card {
--state-home-color: #2ecc40;
--state-not_home-color: #ff4136;
}
entities:
- entity: device_tracker.net_apple_tv
style: |
:host {
--paper-item-icon-color: var(--state-{{ states(config.entity) }}-color);
}
- entity: device_tracker.net_arlo_bridge
style: |
:host {
--paper-item-icon-color: var(--state-{{ states(config.entity) }}-color);
}
- entity: device_tracker.net_broadlink
style: |
:host {
--paper-item-icon-color: var(--state-{{ states(config.entity) }}-color);
}
- entity: device_tracker.net_counter_lights
style: |
:host {
--paper-item-icon-color: var(--state-{{ states(config.entity) }}-color);
}
@DanChaltiel

This comment has been minimized.

Copy link

@DanChaltiel DanChaltiel commented Dec 8, 2020

This was exactly what I was looking for, but it unfortunately did not work, using either card-level or entity-level. I always got the blueish var(--paper-item-icon-color, #44739e)color no matter what. Of note, Chrome DevTools says that my ha-icons have a data-state attribute, but I don't see any data-domain attribute. Removing it in the yaml code didn't change anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment