Color icon on input_select

Configuration Frontend
1

Hi,

I have this code but the color does not change on the value. What am i doing wrong?

input_select.2025_knoppenkeuze is an helper with 5 value’s, 1,2,3,4,0. On every value i like to have the button another color. There are 4 buttons to change this value.

type: tile
entity: input_select.2025_knoppenkeuze
name: Verlichting
icon: mdi:lightbulb-on-40
show_entity_picture: false
hide_state: true
vertical: true
layout_options:
  grid_columns: 2
  grid_rows: 2
tap_action:
  action: perform-action
  perform_action: input_select.select_option
  target:
    entity_id: input_select.2025_knoppenkeuze
  data:
    option: "1"
icon_tap_action:
  action: none
color: |
  {% if is_state('input_select.2025_knoppenkeuze') == "1" %} 
  green
  {% else %}
  red
  {% endif %}
2

Templates not supported by Tile card. You will have to use card-mod.

3

Thnx, but that also is not working. it seems i do not get the value of the helper. I don’t see what i am doing wrong :frowning:

type: tile
entity: input_select.2025_knoppenkeuze
name: Verlichting
icon: mdi:lightbulb-on-40
show_entity_picture: false
hide_state: true
vertical: true
layout_options:
  grid_columns: 2
  grid_rows: 2
tap_action:
  action: perform-action
  perform_action: input_select.select_option
  target:
    entity_id: input_select.2025_knoppenkeuze
  data:
    option: verlichting
icon_tap_action:
  action: none
card_mod:
  style: |
    {% if states(entity) == "verlichting" %}
      ha-card { 
          --primary-text-color: red;
          --tile-color: red !important;
      }
    {% else %}
      ha-card { 
          --primary-text-color: blue;
          --tile-color: blue !important;
      }
    {% endif %}

Firefox_Screenshot_2024-10-28T15-38-51.056Z
Firefox_Screenshot_2024-10-28T15-38-51.056Z562×718 7.36 KB

4

try config.entity (have not checked other code)

5

to style the icon color on a tile you need to use card_mod with :

style: |
  ha-tile-icon {
    --tile-color:
      {% if is_state(config.entity,'on') %} var(--alert-color)
      {% else %} var(--ok-color)
      {% endif %};
  }

ofc adapt your template to suit your demands

6

i need

if option “verlichting” red
if option 2 green
if option 3 blue
if option 4 purple
if option 0 gray

7

so?
make the template do what you ‘need’ :wink:
but first test with a direct color

style: |
  ha-tile-icon {
    --tile-color: green;
  }

btw, are you sure that input_select has the correct options? seems you’re mixing various properties there, using numbers and a state string