Tile card - state icon color 'off' vs 'unavailable'?

I can set a color when entity status is on. But when it is off the icon color is no filled with var(--paper-item-icon-color) as any other icon but it is grey rather indicating the entity is unavailable. I do nto see any option to configure icon color behavior. Is it possible to set it up or not?

3 Likes

Did you ever solve this? I too would like to change the “off” colour of the icon in a Tile card, to better fit my theme. You’d think there would be a theme variable for it somewhere…

Unfortunately, no. I still use my custom button-cards instead… and just a few Tile buttons…

Hey guys, I know I’m late but I think I figured it out…

With card-mod (HACS) you can add the following to your code:

card_mod:
  style: |
    ha-card {
      {% if is_state(config.entity, 'off') %}
      --tile-color: rgb(211,147,47);
      {% else %}
      {% endif %};
      }
    }

I have no idea if that’s the smoothest solution since I’m an absolute beginner myself but it works :smiley:

The “on” color is defined at the top using the default tile strings, while the “off” color is defined in the card-mod code. Of course, you can replace var(--accent-color) with hex, rgb, etc. if you wish.

This works well too if you want to separate the color of the icon and shape background.

image

card_mod:
  style:
    ha-tile-icon$: |
      .shape {
        background: blue !important;
        }
    .: |
      ha-state-icon {
      color: orange;
               }