TileCard: Conditional Colors

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.

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

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:

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

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

Works great - thanks!

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?

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

2 Likes

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

Cheers!