Custom Button Card - dynamicly change color

Configuration Frontend
1

Hello community,

I am trying to change the color of the icon of the custom button card depending on a specific sensor value.

Therefore I am using this code:

show_name: true
show_icon: true
show_state: false
name: PV-Laden
type: custom:button-card
icon: mdi:solar-power-variant-outline
color: |
  [[[
    if (sensor.openwb_chargemode_read == 'PV-Laden') return 'red';
    else return 'blue';
  ]]]
tap_action:
  action: call-service
  service: mqtt.publish
  data:
    topic: openWB/set/vehicle/template/charge_template/3/chargemode/selected
    payload: pv_charging
    qos: '0'
hold_action:
  action: none

Unfortunately it doesn’t work.

The requested sensor status looks like this:

image
image1024Ă—636 34.2 KB

Can somebody please help me out to fix this?

Side note: When I am just trying to change the color of the icon with a fixed value like “red” it works. So I asume that the code after “color:” is in a way wrong.

Thanks in advance for your help.

Cheers
HAMausepaul

2

Custom Button card is very flexible, and can be confusing because of all the options…

Two issues:

  1. To the template interpreter, sensor.openwb_chargemode_read just looks like a variable that has no definition.
  2. color on its own has no meaning. The configuration needs to identify what you want to change color.

There are a few ways to get what you want…

Using a template and Styles:

show_name: true
show_icon: true
show_state: false
name: PV-Laden
type: custom:button-card
icon: mdi:solar-power-variant-outline
styles:
  icon:
    - color: |
        [[[
          if (states['sensor.openwb_chargemode_read'].state == 'PV-Laden') return 'red';
          else return 'blue';
        ]]]
tap_action:
  action: call-service
  service: mqtt.publish
  data:
    topic: openWB/set/vehicle/template/charge_template/3/chargemode/selected
    payload: pv_charging
    qos: '0'
hold_action:
  action: none

Using Entity and State:

show_name: true
show_icon: true
show_state: false
name: PV-Laden
type: custom:button-card
icon: mdi:solar-power-variant-outline
entity: sensor.openwb_chargemode_read
state:
    - value: 'PV-Laden'
      color-type: icon
      color: 'red'
    - operator: '!='
      value: 'PV-Laden'
      color-type: icon
      color: 'blue'
tap_action:
  action: call-service
  service: mqtt.publish
  data:
    topic: openWB/set/vehicle/template/charge_template/3/chargemode/selected
    payload: pv_charging
    qos: '0'
hold_action:
  action: none
1 Like
3

Hello,

thanks a lot for the detailed explanation. Got the point.

Meanwhile (nearly similar to your post) I found with the help of another community the same solution as your second proposal. So, my code looks currently like this - and it works:

show_name: true
show_icon: true
show_state: false
entity: sensor.openwb_chargemode_read
name: PV-Laden
type: custom:button-card
icon: mdi:solar-power-variant-outline
color: grey
state:
  - value: PV-Laden
    color: Green
    icon: mdi:solar-power-variant-outline
tap_action:
  action: call-service
  service: mqtt.publish
  data:
    topic: openWB/set/vehicle/template/charge_template/3/chargemode/selected
    payload: pv_charging
    qos: '0'
hold_action:
  action: none

Thanks again for your valuable help!

Cheers
HAMausepaul