JS template custom button card color does not change on state change

I am trying to change color of icon depending on input_boolean.power_ac and input_select.modestatus. However the color does not change, when I refresh website, then it changes to white not the one which I set. Don’t know why it does not work I do similar thing with service: and it works…

it does not work:

     - show_name: false
        show_icon: true
        type: custom:button-card
        tap_action:
          action: call-service
          service: script.send_ac_cool_command
        state:
          - value: cool
            color: |
              [[[
                return (states['input_boolean.power_ac'].state === 'on') ? 'rgba(0, 119, 179, 1)' : 'rgba(0, 119, 179, 0.5)';
              ]]]
          - operator: default
            color: rgb(0, 119, 179, 0.1)
        entity: input_select.modestatus
        icon: mdi:snowflake
        styles:
          card:
            - padding: 0px
            - margin: 5px
            - margin-top: 0px
            - width: 27px
            - border: none
          icon:
            - width: 100%
            - transform: scale(1)

it works:

      - show_name: false
        show_icon: true
        type: custom:button-card
        tap_action:
          action: call-service
          service: |
            [[[
              return (states['input_boolean.power_ac'].state === 'on') ? 'script.send_ac_power_off_command' : 'script.send_ac_power_command';
            ]]]
        state:
          - value: 'on'
            color: rgba(255, 255, 51, 0.1)
          - value: 'off'
            color: rgba(255, 255, 51, 1)
        entity: input_boolean.power_ac
        icon: mdi:power
        styles:
          card:
            - padding: 0px
            - margin: 5px
            - margin-top: 0px
            - width: 27px
            - border: none
          icon:
            - width: 100%
            - transform: scale(1)