How to make bubble cards use the same color as tile cards

[D3SOX]

Why is it using a different color here?

[Nerwyn]

Bubble cards do not use the same colors as tile/default cards. This is what they look like in the default theme.

[D3SOX]

Is there any way to make them look the same? I already fiddled around with the click/hold actions to make them consistent with tile cards and saw that there already are styling variables set in the theme for Bubble card but it still looks different, especially the background colors

[Nerwyn]

In the bubble card popup custom styles, to make tiles/default cards look like bubble cards:

:host {
  --ha-card-background: var(--bubble-main-background-color);
  --ha-card-box-shadow: var(--bubble-box-shadow);
  --ha-card-border-radius: var(--bubble-border-radius);
  --ha-card-border-width: 2px;
  --ha-card-border-color: transparent;
}

And to make bubble cards look like tiles/default cards:

:host {
  --bubble-main-background-color: var(--ha-card-background);
  --bubble-box-shadow: var(--ha-card-box-shadow);
  --bubble-border-radius: var(--ha-card-border-radius);
}
.card-content > div {
  border: var(--ha-card-border-width) solid var(--ha-card-border-color);
}

[D3SOX]

The second snippet does exactly what I wanted, but I discovered a small issue with it.

It doesn't have a different background color for the icon when it is clickable

After that I think this should be published to the Bubble Cards module store. Would you like to do that or should I do it?

[Nerwyn]

You can do it, I don't want to maintain more things while I have my plate full 😆.

[D3SOX]

Okay, gonna look into this and test some other edge cases before