Created
September 11, 2019 20:28
-
-
Save dale3h/c66c14e0ee9dae47ff246ee081cc2e27 to your computer and use it in GitHub Desktop.
[Lovelace] Style entity icons based on state
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 myha-icons have adata-stateattribute, but I don't see anydata-domainattribute. Removing it in the yaml code didn't change anything.