How to change bubble card background

[Baumtreter]

As I'm a novice in terms of styling and bubble cards in general i didn't want to open an issue.
Pretty sure its on my end.
For me the visibility of the bubble cards, no matter if Dark or Light Mode, is to low.
So i thought i adjust the rgba color in the theme file directly.
Sadly nothing happens.
But I can adjust the styles directly in the card.
Maybe someone can point me into the right direction?

[kabukimandelux]

I don't know exactly what issue you have, but here's my code to make the bubble cards work better/nicer with the frosted LIGHT theme .

Simply put it in the styling options or in a module
:host {
--bubble-border-radius: var(--ha-card-border-radius, 12px);
}
.bubble-button-background {
background-color: ${state === 'on' ? '#fffff' : '#ffffff'} !important; opacity: 0.2 !important;
}
.bubble-range-fill {
background: ${state === 'on' ? '#fffff' : '#ffffff'} !important; opacity: 0.2 !important;
}
.bubble-container {
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none);
box-shadow: var(--ha-card-box-shadow, none);
box-sizing: border-box;
background: rgba(255,255,255,0.2);
}

[Baumtreter]

Sorry for the foolish question - how do I adapt it to become a module? Infra guy here, deff not a frontend dev.

In 3.0.0 you have the option to add your own modules. Just make a new one and copy @kabukimandelux code into the Code (CSS/JS template) section. You can then apply the module to just one or all cards which helps a bit to apply the changes "globally"

[wessamlauf]

Hi :) I am not a bubble card user so I haven't run into this issue. Would you mind sharing the screenshots of how it actually looks inside your systems so I can fix the issues ? Many thanks.

[Aloe-recite]

Hi :) I am not a bubble card user so I haven't run into this issue. Would you mind sharing the screenshots of how it actually looks inside your systems so I can fix the issues ? Many thanks.

This is how it looks to me without @kabukimandelux fixes. As you can see it’s quite good but different than the default Lovelace items (no 3d effect, barely visible button shade in the second screen, etc). The fixes above solve many problems (still, not all) with the light version and it starts to look very close to how it’s supposed to be :)
I suggest you play around a bit with a couple of bubble cards (I love them and a lot of people swear by them), it’s quite easy to get the hang of it and it looks adopted widely enough to justify the effort to fit the theme IMHO.
thank you for your work!

[moh207]

When you use the Color Flat Bubble Cards module (https://github.com/Clooos/Bubble-Card/discussions/1320), you get a pretty sleek look.

[wessamlauf]

When you use the Color Flat Bubble Cards module (https://github.com/Clooos/Bubble-Card/discussions/1320), you get a pretty sleek look.

That indeed looks awesome!