Card-mod for Tile card: icon & tile color

Configuration Frontend
23

@boheme61
In the morning I think you are right.
May be I should have been more patient and explain with details in the very beginning.
Please accept my apologize if I was rude.

For the record:

Tile card has nice default features:
– icon’s color depends on a domain & state;
– card’s background gets the same color (with transparency) on hover.

So there are possible ways to style this behaviour.
Disclaimer: I am not an expert on the Tile card, so more possible ways of styling could be possible.

  1. Set a color for the whole card:
    – icon = red
    – card’s background = reddish on hover.
    A native “color” option is used.
type: tile
entity: sensor.processor_use
color: var(--red-color)

at2

  1. Set a color for the whole card:
    – icon = red
    – card’s background = reddish on hover.
    To set a static color there is no need to use card-mod - see pt. 1 above.
    But this way (as well as all ways described below) allows to set a color dynamically dependently on conditions defined by jinja templates.
type: tile
entity: sensor.processor_use
card_mod:
  style: |
    ha-card {
      --tile-color: red !important;
    }

at2

  1. Set a color for the icon only:
    – icon = red
    – card’s background = default on hover.
type: tile
entity: sensor.processor_use
card_mod:
  style: |
    ha-tile-icon {
      --tile-color: red;
    }

at3

  1. Set different colors for the icon & the card:
    – icon = red
    – card’s background = greenish on hover.
type: tile
entity: sensor.processor_use
card_mod:
  style: |
    ha-tile-icon {
      --tile-color: red;
    }
    ha-card {
      --tile-color: green !important;
    }

at4

Update 10.02.24: replaced “.icon” with “ha-tile-icon” after 2024.2.

9 Likes