Changing background based on a binary sensor on a bubble card

Configuration Frontend
1

Hi all,

Probably a really obvious fail so apologies but I cant get a template to work to change the background colour of a card based on a binary sensor, can anyone help?

.bubble-button-background {
    - background-color: >-
        [[[
          if (binary_sensor.galaxy_watch7_343z_on_body_sensor.state === ‘on’)
            return ‘#8AD926FF’;
          else
            return ‘#1982C4FF’;
        ]]]
}
2

Chat GPT to the rescue, it suggested:

  .bubble-button-background {
    background-color: ${
      hass.states['binary_sensor.galaxy_watch7_343z_on_body_sensor'].state === 'on' ? '#8AD926FF' :
      hass.states['binary_sensor.galaxy_watch7_343z_on_body_sensor'].state === 'off' ? '#1982C4FF' :
      '#FF0000FF' /* Default color if the state is neither 'on' nor 'off' */
    } !important;
  }

This works but isn’t dynamic, eg you have to refresh the page for it to update regardless of changes in the sensor, is there a way to make it dynamic?

3

If you’re reading this you are watching my brain work (or fail too!), sorry!

Chatgpt’s suggestion to make it dynamic was, but this doesnt work, Im still trying to get my head around templating so sorry for the dumb questions!:

  .bubble-button-background {
    background-color: >
      [[[ 
        return hass.states['binary_sensor.galaxy_watch7_343z_on_body_sensor'].state === 'on' 
          ? '#8AD926FF' 
          : '#1982C4FF'; 
      ]]]
  }
4

Is it for a bubble-card? Please add it to the thread title then to make it more clear for users.

5

by doc

try this

styles: |
  .bubble-button-background {
    opacity: 1 !important;
    background-color: ${hass.states['binary_sensor.galaxy_watch7_343z_on_body_sensor'].state === 'on' ? '#8AD926FF': '#1982C4FF'} !important;
  }
6

Thank you and done.