Change color of button based on Input_select state

[old stream]

I have a setup a very basic Input_Select helper with 4 states: Available, Busy, Out of Office, On the Phone. I have already other buttons to be able to change that.

Now for the dashboard I would like to make the button change color (and Icon hopefully) when the state changes. I have the card-mod addon from HACS, but can't find the correct template just for Input_select states. I am very new to HA in general so I feel like I have hit a brick wall here.

Is there a better way than using card-mod to achieve this?

[void sparrow]

card mod is the way, core HA doesn't offer much support for any dynamic colors.

[old stream]

Is there a template for the input_select states themselves. Thats the part I guess I am getting confused about.

[hearty spindle]

Something like this? you might need to choose different css path, depends on the card you're using. read the card_mod doc.

card_mod:
  style: |
    ha-state-icon {
      {% if is_state(config.entity, 'opt-a') %}
      --card-mod-icon: mdi:alpha-a;
      color: blue;
      {% elif is_state(config.entity, 'opt-b') %}
      --card-mod-icon: mdi:alpha-b;
      color: green;
      {% elif is_state(config.entity, 'opt-c') %}
      --card-mod-icon: mdi:alpha-c;
      color: red;
      {% elif is_state(config.entity, 'opt-d') %}
      --card-mod-icon: mdi:alpha-d;
      color: gray;
      {% endif %}
    }

[old stream]

Thanks! I will give that a try

[old stream]

So the icons change but the color does not. This is a regular button card atm

I will look into the docs, just wanted to let you know

[crude flicker]

Instead of color:, try --card-mod-icon-color:.
I also target ha-card instead of ha-state-icon but I don't think that should matter in this case.
I have a couple of examples on my Github. LINK.

[old stream]

that worked

thank you so much!

possible to change the entire button color instead of the icon? incase I want something really high visibility ?

[crude flicker]

background: yellow; in ha-card should work for you. Follow the link I posted above and scroll up two examples. There's one showing how to use a light's RGB for the card's background. You should be able to adapt that for what you're working on.

[old stream]

I found that after asking but it seemed to be doing a lot more than I needed. Still will try this! Thanks again

that worked!

I might need to work on the colors though lmao

[old stream]

any idea why from time to time, it reverts back to the normal icons, with no state changes? I lose the colors too.

If I go to the code, and just hit save, it comes right back. A weird hiccup so far.

when I click "edit" the preview is correct

and when I hit save, they all go back, but I have not changed anything!

[old stream]

https://github.com/thomasloven/lovelace-card-mod/issues/354

this seems to be the same issue I guess

[hearty spindle]

Never had that before, paste your code?

[old stream]

show_icon: true
type: button
tap_action:
  action: toggle
entity: input_select.person_status
show_state: true
card_mod:
  style: |
    ha-card {
      {% if is_state(config.entity, 'Out of the Office') %}
      --card-mod-icon: mdi:car-side;
      --card-mod-icon-color: blue;
      {% elif is_state(config.entity, 'Available') %}
      --card-mod-icon: mdi:account-check;
      --card-mod-icon-color: green;
      {% elif is_state(config.entity, 'Busy') %}
      --card-mod-icon: mdi:account-cancel;
      --card-mod-icon-color: red;
      {% elif is_state(config.entity, 'Phone Call') %}
      --card-mod-icon: mdi:phone-cancel;
      --card-mod-icon-color: yellow;
      {% endif %}
    }

[old stream]

sure! ty

[old stream]

    style: |
      ha-card {
        animation: blink 2s linear infinite;
        background: brown;
      }```

unrelated, but can't get this thing to flash/blink

[old stream]

It's a conditional card but a button style, I don't know if that changes anything. I'm not trying to get it to blink based on any kind of condition. Just if the card is existing.

[hearty spindle]

you need to define the blink keyframes

 card_mod:
    style: |
      @keyframes blink {
        50% {
          opacity: 0;
        }
      }     
      ha-card {
        animation: blink 2s linear infinite;
        background: brown;
      }

[hearty spindle]

sorry I don't understand what are you trying to do, this card is not going to change any state of the input_select, you cannot toggle an input_select.

[old stream]

Sorry that was just left from me learning. Yeah I got other buttons and automations to actually change the helper state. These are just flags to show status.

[old stream]

I'll try this. TY