Bubble card button stuck on default blue

Configuration Frontend
1

Hello everyone,

My bubble cards button have, since yesterday, all reverted back to default blue even though a custom color is specified in the .yaml and was working just fine until yesterday.

The only thing I did was deleting a theme which was not used by any dashboards. Reinstalled the theme also did not change anything.

Interestingly, the icons in the buttons and the associated pop-up cards do show the correct color.

Here what the dashboard looks like now:

{CF8CDEE3-9EBD-44B2-AF36-00A5DA015CCD}
{CF8CDEE3-9EBD-44B2-AF36-00A5DA015CCD}585×219 9.07 KB

If I click on a button:

{5B285760-597B-4783-9AA6-58A12DBBBB83}
{5B285760-597B-4783-9AA6-58A12DBBBB83}564×357 19.1 KB

what the code looks like for a button:

{AC7467DA-F3F3-47E2-BCA5-F532DD82A4F7}
{AC7467DA-F3F3-47E2-BCA5-F532DD82A4F7}435×509 9.21 KB

The issue appears both on mobile devices as well as desktop PC. Tried clearing the cache, no success also not with rebooting HA.

Many thanks in advance for your help :slight_smile:

2

Were there any recent updates to the card or did you update HA? The way the color is set might have changed. If you know how, I would suggest trying your browser's "inspect" tool to see if the color changes.

3

I checked the documentation for the card and according to what it says the background styling code that you're using only applies to pop-up cards. Try using the alternative code and it should work, it did for me.

image
image1540×857 46.1 KB

Check the repository documentation for any other changes that might apply.

4

Thank you for looking into this :slight_smile:
There was an update not so long ago but the color of the button did not change immediately after. I doubt this was the cause.

However, I did manage to have my button in the right color again by just changing the button type in the card config from "switch" to "slider".

It does not affect the aspect of function of the button but it made the colors come back.

Not sure what the actual cause is but it is a good enough workaround for the time being.

5

You do not have to change the button type you just need to use the correct code.

If your button switch is NOT part of a pop-up use the following:

styles: | 
  ha-card {
    --bubble-main-background-color: rgba(12,120,50,0.5) !important;
  }

However, if your button switch IS part of a pop-up then use the following.

styles: | 
  .bubble-button-card-container {
    background: rgba(12,120,50,0.5) !important;
  }
6

Thank you again for your help.
I tried with the "new" code but the behavior remains exactly the same if i revert back to the switch button type.
As soon as I change the button type, i get control over the color again (old code or new code)