TileCard: Conditional Colors

Feature Requests
1

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:

image
image679×769 56.7 KB

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.

2

Is this still working for you? For me the color isn’t working anymore since the last update.

3

yep… isn’t working right now…since I only use it on some very specific areas, I haven’t noticed it… :-/

Need to see, why the var --tile-color does no longer work :frowning:

4

ok, it seems that the .tile has changed to .icon

        card_mod:
          style: |
            .icon
            {
              {% if states(config.entity)|float(0) > 24.0 %}
                --tile-color:var(--red-color);
              {% elif states(config.entity)|float(0) > 22.9 %}
                --tile-color:var(--amber-color);
              {% elif states(config.entity)|float(0) > 18.9 %}  
                --tile-color:var(--green-color);
              {% else %}  
                --tile-color:var(--blue-color);
              {% endif %}   
            }
1 Like
5

Great! Thanks for sharing.
That did the trick. Working again here :clap: :grinning:

6

Works great - thanks!

image
image752×516 19.9 KB

7

Is this still working for you guys? I´m using code from CChris but it seems something has changed and the color is not applied to the icon anymore:

card_mod:
      style: |
        .icon
        {
          {% if states(config.entity)|float(0) > 4 %}
            --tile-color:var(--red-color);
          {% elif states(config.entity)|float(0) < 3.5 %}  
            --tile-color:var(--green-color);
          {% else %}  
            --tile-color:var(--amber-color);
          {% endif %}   
        }

Any ideas?

8

try this one

card_mod:
  style: |
    ha-card {
      {% if states('config.entity') not in 'No Error' %}
        --tile-color:var(--green-color) !important;
      {% else %}
        --tile-color:var(--red-color) !important;
      {% endif %}
    }

Or

        card_mod:
          style: |
            ha-card {
              {% if states(config.entity)|float(0) > 24.0 %}
                --tile-color:var(--red-color) !important;
              {% elif states(config.entity)|float(0) > 22.9 %}
                --tile-color:var(--amber-color) !important;
              {% elif states(config.entity)|float(0) > 18.9 %}  
                --tile-color:var(--green-color) !important;
              {% else %}  
                --tile-color:var(--blue-color) !important;
              {% endif %}  
            }

I think, the major requirement is the !important; as well as the change to ha-card

3 Likes
9

Thank you CChris, adding !important and changing .icon to ha-card, worked for me.

Cheers!