Can't get Bubble Card to change it's colours

Configuration Frontend
1

I’m using Bubble Card from @Cloos and all is just peachy but try as I might I can’t get the colours to change.
I’m getting a nice yellow when (say) a switch is on and a subtle grey when its off but I’d like to highlight some switches differently. Maybe Red when it’s on and Blue when it’s off etc.
I’ve setup a really simple single entity card for testing but try as i might when I adjust anything in the Styling options nothing changes. I mean the switch still works but it’s yellow/grey no matter how I set it.
I’ve noted I need to clear the cache which I have done repeatedly - but nothing changes.
Anyone have a clue what I’m doing wrong?

2

Hi! Can you share the custom style/template you have tried?

3

Sure, here it is:

type: custom:bubble-card
card_type: button
entity: input_boolean.user_presence_nick
name: Nick
button_action:
tap_action:
action: toggle
styles: |-
type: custom:bubble-card
card_type: button
entity: input_boolean.user_presence_nick
name: Test
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === ‘on’ ? ‘blue’ : ‘red’} !important;
}

4

Sorry to ask again but I just can’t seem to fathom this one @Cloos any help you can give much appreciated.

5

I can make the color change in light entities but it doesn’t work for me in switch entities. Not sure if I’m doing it right, I’m new to BubbleCard.

6

More info, the switch card keeps the new color when it is off. Once it is on it stays in the new color briefly (about half a second) and then changes to the default color (orange).