Change icon color based on state(on/off)

OK so I definitely see why you’re having issues with your button. You need to review the documentation for the button card carefully.

A couple of things I notice right away. state_color: has no value. It requires a boolean (true/false). When set to true, the icon color will change with the state of the entity specified in the entity: parameter which you have left blank.

The colors the icon changes to (active icon/ inactive icon) are set by your theme. You cannot set these colors from within the card itself. If you want to do that you will have to use a custom button card or card_mod. I don’t think you’re ready for those yet!

I have no idea where you got state: and value:/color: from. That is not a valid parameter for the button card. The valid parameters and the values they required are listed on the doc page.

Are you perhaps mixing up the custom button card and the built in button card? If you are just copying code from different examples in the forums that is probably the case.

So quick and dirty solution to get this going for right now:

Try this, it should do what you want. Forget about your custom colors right now.

type: button
name: Office Speakers
icon: mdi:volume-high
entity: switch.office_guest_bed_rm_speakers_switch_3
show_state: true
state_color: true
tap_action:
  action: call-service
  service: switch.toggle
  service_data:
    entity_id:
      - switch.office_guest_bed_rm_speakers_switch_4
      - switch.office_guest_bed_rm_speakers_switch_3

These two switches, are they both always in sync? Meaning if one is on the other is also? If so, you should put these switches into a switch group and use that group as the entity for the button card. If you’d like to to that I can walk you through it.

4 Likes