Bubble card not adapting to theme background properly

[dsimoes]

Describe the bug

It seems the Bubble card button background isn't applying the expected background color/effect from the theme.
This can be noticable by simply placing the Bubble button with other cards (native or mushroom for example). See the screenshots below.

To Reproduce
Steps to reproduce the behavior:

1. Create a dashboard/view with different entities, both Bubble and native
2. Apply different themes and notice the difference

Expected behavior
Theme background color is consistentfor all cards.

Screenshots

First & Last are Bubble cards:

YAML
If applicable, add any relevant YAML code.

Your code here

Informations (please complete the following information):

• OS: Windows
• Browser/App: Chrome
• Bubble Card version: 2.2.4
• Home Assistant version: 2024.10.2

Additional context
Add any other context about the problem here.

Thank you! 🍻

[lennon101]

yeah I'm experiencing this as well. Is there some setting (or style) we need to apply to fix this? I'm wondering if it isn't actually a bug but rather a conflic between the theme and the bubble cards. See below showing the button card with the correctly applied background opacity (default settings for the theme) and the bubble cards with a much darker opacity. I've tried manually chaning the background of each using variations of:

styles: |
  .bubble-button-background {
    opacity: 1 !important;
  }

But I havn't had any luck with this.

[EinfachHans]

Hey @Clooos - hate to mention you directly, but because this issue is open for over a month now and you are very active in the last days (love it btw) i would love to hear feedback from you about this.

Currently this really annoys me when using bubble card components because they not match perfectly to other cards.

Greetings

[Clooos]

Hi! I'm sorry for not having answered this sooner.

In fact there is a reason for that, and it's because of the pop-up card, if I have used the default HA style, the Bubble Card would have been the same color as the pop-up background, and the pop-up background have the default card color to contrast with the HA background.

That was a tough decision when I was working on the first Bubble Card beta, but in v2.3.0 it will be easy to change that with a single line in the theme YAML.

It's indeed not great when using different cards but that's why I think it's best to go full Bubble Card.

And one more thing, I'm planning to add the possibility to select different card stylings for the cards, like a style that fit the default HA style (so exactly what you're all looking for).

Wait and see!

[dsimoes]

Hi @Clooos,

Wouldn't you be able to work around that by letting all bubble cards use the default background and have only the card_type: pop-up have specific background to be able to contrast with their inner components?

Thanks!

[Clooos]

I will not change how the default Bubble Card styling is, this would be a massive breaking change for users who likes it how it is, it's been more than one year that this project exist and I got really few comments about that.

But like I said I will add this as an option in the future.

[dsimoes]

That's unfortunate. The fact that it doesnt respect the theme is a big problem for the ecosystem of HA. Thanks for your effort.

[npstewart87]

That's unfortunate. The fact that it doesn't respect the theme is a big problem for the ecosystem of HA. Thanks for your effort.

There's all sorts of ways to customize bubble card colors, fonts, containers, etc.. Cloos even created a whole them which you could just download, copy, rename, and customize/ edit however you want. Otherwise, you can fork it and update anything you want.

In my opinion, bubble card really works best if you use all of it, including the theme and then customize the theme however you want to.