With the UI Changes that have been implemented over the last couple of months within HA (Tile Cards, State-Based colors) - I have rebuilt most of my Dashboards.
They are using the TileCard most of the time now.
I’ve created my own color schemas within my theme - and I am pretty happy with all of this - except one particular thing:
TileCards with Select-Entities.
I would really like to have a feature, which enables a tile card to change the Icon-Color as well as the Background color based on a) a selected value - b) a value / range…
For example, I am using this feature for my vacuum, with the supply status:
While I COULD change the entity to “battery” for the tiles with the percentage, and could probably get a similar look, this would not be possible for the other information with “time left”…
So this is completely done with Card-Mod:
cards:
- type: horizontal-stack
cards:
- type: tile
entity: sensor.dreamebot_l10s_ultra_detergent_left
name: Waschmittel
card_mod:
style: |
.tile {
{% if states(config.entity)|float(0) > 49.9 %}
--tile-color:var(--green-color);
{% elif states(config.entity)|float(0) > 14.9 %}
--tile-color:var(--amber-color);
{% elif states(config.entity)|float(0) >= 0 %}
--tile-color:var(--red-color);
{% endif %}
}
- type: tile
entity: sensor.dreamebot_l10s_ultra_detergent_time_left
name: Waschmittel
card_mod:
style: |
.tile {
{% if states('sensor.dreamebot_l10s_ultra_detergent_left')|float(0) > 49.9 %}
--tile-color:var(--green-color);
{% elif states('sensor.dreamebot_l10s_ultra_detergent_left')|float(0) > 14.9 %}
--tile-color:var(--amber-color);
{% elif states('sensor.dreamebot_l10s_ultra_detergent_left')|float(0) >= 0 %}
--tile-color:var(--red-color);
{% endif %}
}
While this is working well, the background color of the tile will always be the default one… and It would be required to implement this into the Card-Mod, too.
Therefore, I would like to have a more simple way to edit the color schema of a tile based on conditions.
Or at least, the background color should be somehow be inherited from the “–tile-color” information.
This would be much more consistent with the default color options that are available for the tile card.