Skip to content

Instantly share code, notes, and snippets.

@dale3h
Created September 11, 2019 20:28
Show Gist options
  • Save dale3h/c66c14e0ee9dae47ff246ee081cc2e27 to your computer and use it in GitHub Desktop.
Save dale3h/c66c14e0ee9dae47ff246ee081cc2e27 to your computer and use it in GitHub Desktop.
[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
Copy link

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