Button : change color

1

I’ve got two buttons that shows green when I am at home (or my car is), but gray when I am not at home (or my car isn’t). How can I change it to red when I am not at home?

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: button 
        show_name: true
        show_icon: true
        tap_action:
          action: none
        entity: device_tracker.xiaomi_13
        name: Kris
        icon: mdi:account
        icon_height: 50px
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: none
        entity: device_tracker.tesla
        name: Tesla
        icon: mdi:car
        icon_height: 50px
2

You can do something like this…

type: vertical-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: device_tracker.xiaomi_13
    show_state: true
    card_mod:
      style: |
        ha-state-icon {
         --state-color: {{'green' if states(config.entity) =='home' else 'red' }};
         }
3

Thanks for your answer LiQuid_cOOled! I’ll try that one.

But, is there any way I can remove the “thuis”? Just like the Tesla button?

afbeelding
afbeelding720×250 5.92 KB

This is the code so far (only changed the Xiaomi 13 button)

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: none
        entity: device_tracker.xiaomi_13
        name: Kris
        icon: mdi:account
        show_state: true
        card_mod: null
        style: >
          ha-state-icon {--state-color: {{'green' if states(config.entity)
          =='home' else 'red' }};}
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: none
        entity: device_tracker.tesla
        name: Tesla
        icon: mdi:car
        icon_height: 50px
4

You just need to use the same card-mod code for the second card to work

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        show_state: false
        type: button
        tap_action:
          action: none
        entity: device_tracker.xiaomi_13
        name: Kris
        icon: mdi:account
        icon_height: 50px
        card_mod:
          style: |
            ha-state-icon {
             --state-color: {{'green' if states(config.entity) =='home' else
            'red' }};
            }
      - type: button
        show_name: true
        show_icon: true
        show_state: false
        tap_action:
          action: none
        entity: device_tracker.tesla
        name: Tesla
        icon: mdi:car
        icon_height: 50px
        card_mod:
          style: |
            ha-state-icon {
             --state-color: {{'green' if states(config.entity) =='home' else
            'red' }};
            }

show_state: false removes the state

1 Like