Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bubble-cards do not care about Themes #1144

Closed
SynoUser-NL opened this issue Jan 15, 2025 · 33 comments
Closed

Bubble-cards do not care about Themes #1144

SynoUser-NL opened this issue Jan 15, 2025 · 33 comments
Labels
bug Something isn't working

Comments

@SynoUser-NL
Copy link

SynoUser-NL commented Jan 15, 2025

While I really like the default color scheme of the Bubble cards, I wanted a couple of different ones to differentiate between functions.
So I made a copy of the Bubble theme ( https://github.com/Clooos/Bubble ), and started editing colors.
However, while the normal HA cards use my new color scheme, the Bubble items keep using the Bubble theme.

Even when defining the Bubble CSS ID's in the theme yaml, the color scheme does not change.

To Reproduce

  1. Make a copy of the Bubble theme, rename the file and folder, and edit the yaml-file to match the theme name etc.
  2. Change the color scheme and save
  3. Set the new theme name in the dashboard
  4. HA cards will display using the new scheme, Bubble items will still use the bubble scheme.

Expected behavior
Bubble cards should follow any theme chosen by the user.

Informations (please complete the following information):

  • OS: na
  • Browser/App: na
  • Bubble Card version: 2.3.3
  • Home Assistant version: 2025.1

PS: it may of course be I'm doing something wrong here, but the fact that other cards are following the new scheme perfectly leads me to believe there is something hard-coded in the Bubble cards. Also the bubble-card colors do not appear anywhere in my new theme, so I'm puzzled where these colors come from.
If there is a way to define new Bubble-card colors in the theme's yaml, please enlighten me.. :)

Thank you! 🍻

@SynoUser-NL SynoUser-NL added the bug Something isn't working label Jan 15, 2025
@Clooos
Copy link
Owner

Clooos commented Jan 15, 2025

Hi! I'm not sure to understand your issue, when I change the theme, all my Bubble Cards change accordingly:

image

This is the default HA theme.

@SynoUser-NL
Copy link
Author

SynoUser-NL commented Jan 15, 2025

Yes, all the Bubble cards do.
But when you mix Bubble cards with HA cards, there is a mismatch in how they look.
And with the theme yaml I am somehow unable to correct it.

afbeelding

The top 3 rows are just general HA, Mushroom or HACS downloaded cards. I'm sure you recognize the bottom bit.. :)

I've said it before and will again: thanks very much for Bubble-cards. The pop-up feature is excellent!

@SynoUser-NL
Copy link
Author

PS: really like the double line information in your example (in your Production button, for example). 👍
Taking a look now at how to do that..

@Clooos
Copy link
Owner

Clooos commented Jan 15, 2025

Indeed, Bubble Card use the variables from themes differently and this is by design (I have some reasons for that, mainly for the contrast in the pop-ups), that's why my best recommendation is to go full Bubble Card.

But I'm planning to add some new styling options to better match the default HA design, I just don't know when.

And for my Production card, this is a layout in the editor with some sub-buttons, check this:

image

@SynoUser-NL
Copy link
Author

Indeed, Bubble Card use the variables from themes differently and this is by design (I have some reasons for that, mainly for the contrast in the pop-ups), that's why my best recommendation is to go full Bubble Card.

First off, I just want to say how much I truly appreciate the work you’ve done on Bubble-cards—it’s an amazing project, and I’m genuinely impressed by the creativity and effort behind it!

That said, I hope you don’t mind me sharing some thoughts on this particular design choice that I don’t quite understand. When developing for Home Assistant (HA), I believe it’s important to align with how HA approaches things. That includes the way themes are handled. In my opinion, it should be possible to change themes seamlessly, as documented by HA. Unfortunately, this doesn’t seem to be the case right now, which feels a bit off. Standards exist for a reason, and while it’s great to add extra CSS theme options for customization, it’s equally important to ensure the core theming functionality works as expected (and that any additional options are well-documented).

Additionally, recommending—or effectively requiring—a fully Bubble-card-based setup isn’t very practical. HA dashboards are meant to be versatile, and most users mix and match various cards to suit their needs.

For example, I’ve created Bubble-card pop-ups using a modified theme alongside standard HA cards, and they display perfectly with normal HA theming. However, the Bubble-card elements stand out because their colors don’t align with the rest of the dashboard. This mismatch makes the overall appearance less cohesive and less visually appealing. From what I can tell, there’s currently no way to adjust this, which is a bit frustrating.

afbeelding

As for issues with contrast, I think it’s something every color scheme faces—even in standard HA cards. The solution lies in using the correct colors, ensuring good accessibility and aesthetics.

To wrap up, I want to emphasize how much I value this project. It’s truly fantastic work! I just believe this theming aspect could be approached differently, and I’d be more than happy to assist in any way I can to help make it happen.

@refined-fish
Copy link

I have a similar problem. bubble-card was great. It solved a lot of my problems. But I also like HA's default tiles. When the two are mixed, there are differences in color and transparency, to be honest, it is not very good-looking, it is really a very regrettable thing.
Image
I had to try adding custom css to alleviate the problem. But the effect is not satisfactory

ha-card {
  --bubble-main-background-color: rgba(0,0,0,0.5);
}

Image

@SynoUser-NL
Copy link
Author

@refined-fish
Thank you! That entity did the trick, at least as a workaround.
Adding this in my theme actually changed the Bubble card backgrounds so they now look identical. I somehow missed this when looking at the Bubble CSS codes.

However, I do feel the Bubble cards should just follow the standards set by HA.
@Clooos , please keep up the excellent work, and again: happy to help if I can.. Just ask.

@Clooos
Copy link
Owner

Clooos commented Jan 23, 2025

Hi again! Check this 😁

https://www.reddit.com/r/BubbleCard/s/7STwqWsmK0

@SynoUser-NL
Copy link
Author

Hi Clooos,

Thanks, and sorry for not replying earlier.
That appears to be a great solution. Any idea as of when Bubble users could make use of this?

@Clooos
Copy link
Owner

Clooos commented Feb 3, 2025

I will release this in beta first (but I've intensively tested it and it's really stable), probably in less than a week 👌

I've made a lot of progress:
https://www.reddit.com/r/BubbleCard/s/q4pKmVBDUN

Clooos added a commit that referenced this issue Feb 7, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
- [x] Cards/templates are now directly testable in edit mode, like a template that change the color based on a state (for example if you press on that button in the editor)
- [x] Horizontal buttons stack missing borders after load #1124
- [x] Added a lot of optimizations for Safari on iOS and Mac
- [x] Custom styles/template are now applied faster
- [x] Console that show templates error in the editor.
- [x] Various CSS styling improvements
- [x] Optimized the system that block the dashboard from being scrolled when a pop-up is open. Should fix #913
- [x] Sliding from the header of a pop-up is now working correctly on iOS
- [x] Fixed a memory leak in the text scrolling effect for better overall performance
- [x] Greatly optimized the editor slowness for dashboards with many/heavy pop-ups #698
- [x] Added `—bubble-border` variable
- [x] New global custom styles/templates system from a single YAML file 
- [x] Added a global custom style that follow the default Home Assistant styling (work with all themes) #1144
- [x] You can control global styles with card variables from « per-card » custom styles, by adding variables starting with « this. » or « card. ».
- [x] You now have access to the « this » variable in the custom templates.
- [x] Refactored and improved the card’s custom styles system for much better performance and easier maintenance.
- [x] Fixed a memory leak in the custom templates system.
@Clooos
Copy link
Owner

Clooos commented Feb 15, 2025

Hi! You can now use a module for that in the latest release! It is added by default, so give it a try! 😃

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

@refined-fish
Copy link

Hi! You can now use a module for that in the latest release! It is added by default, so give it a try! 😃

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

Oh my God, I've already experienced it and it feels very good!

In the past, I had to manually add custom CSS to each card to make the bubble card similar to the official tile card, but now I just need to turn on the "HomeAssistant Default styling" switch to automatically adjust the transparency and rounded corners.

But now it seems that there are some minor problems:

  1. The button style of the bubble card is not the same as the default style of the tile (see the picture below)

Image

  1. The drop-down menu of the bubble card is not the same as the default drop-down menu of the tile (it is a bit unfavorable if the transparency is too high).

Image

Image

It is worth mentioning that I fully understand the effort required to perfect these small details, so what I want to express more is praise, you have done the exciting work!

@refined-fish
Copy link

@refined-fish Thank you! That entity did the trick, at least as a workaround. Adding this in my theme actually changed the Bubble card backgrounds so they now look identical. I somehow missed this when looking at the Bubble CSS codes.

Hi friend, I highly recommend you try the latest version, it's much better than the CSS I provided

@Clooos
Copy link
Owner

Clooos commented Feb 15, 2025

Thank you for the feedback! Could you by any chance try to edit the Home Assistant default styling module to fix these last issues then sharing it here? This would help me a lot and if you need help, don't hesitate to ask 😄

@refined-fish
Copy link

Thank you for the feedback! Could you by any chance try to edit the Home Assistant default styling module to fix these last issues then sharing it here? This would help me a lot and if you need help, don't hesitate to ask

Unfortunately I'm not very good at that, but I'll try my best, and if I get results and no one else comes up with a better solution, I'll share it here

@refined-fish
Copy link

Thank you for the feedback! Could you by any chance try to edit the Home Assistant default styling module to fix these last issues then sharing it here? This would help me a lot and if you need help, don't hesitate to ask 😄

I've found using:
ha-card {
--bubble-icon-background-color: rgb(230, 128, 41) !important;
}
parameters can adjust the background color of the icon container.
Image
But I'd love to know the detailed data on the official tile color. I used to get the RGB value through the color picker, first of all this is inconvenient, and secondly the official tile is translucent, and the RGB value will be affected by the color of the background wallpaper. Do you know how to get the same parameters as the official ones?

@Clooos
Copy link
Owner

Clooos commented Feb 15, 2025

I will check that myself, don't worry 🙂

I will see what are the variables Home Assistant use by default.

@refined-fish
Copy link

I will check that myself, don't worry 🙂我将亲自检查,别担心 :)

I will see what are the variables Home Assistant use by default.我将查看 Home Assistant 默认使用的变量有哪些。

Also, I didn't find how to change the color of the drop-down menu, and the above parameter to modify the background color of the icon container did not modify the background color of the air conditioner card temperature setting (as you can see in the image above). I guess the code needs to be written by someone who knows more about CSS. I can only use the examples provided by the project homepage documentation, and I don't understand anything more detailed (I've tried the example writing of the project homepage, but I didn't get satisfactory results)

@refined-fish
Copy link

I found a new issue:
In the pop card, it seems that the module is not fully active, you can see that the rounded corners have successfully taken effect, but the transparency and color are still black and opaque by default
Image

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

This last one is not an issue, this is to differentiate pop-up's headers from other cards 🙂

I've made a lot of progresses on the other styling issues, I will share the new module here when it's done.

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

Can anyone try this one? 🙂

home-assistant-default:
    name: Home Assistant default styling
    version: "v1.1"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1230"
    description: This module applies Home Assistant’s default styling to Bubble Card. To set it as the default, move it under <code>default:</code> in your YAML file.
    code: |
        :host {
            --bubble-accent-color: rgba(0,170,240,0.6); /* Edit this color if needed */
            --bubble-main-background-color: var(--ha-card-background, var(--card-background-color, #fff));
            --bubble-border-radius: var(--ha-card-border-radius, 12px);
            --bubble-icon-border-radius: 32px;
            --bubble-button-border-radius: var(--bubble-border-radius);
            --bubble-climate-button-background-color: var(--bubble-icon-background-color);
            --bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
        }
        
        .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;
        }
        
        .bubble-icon-container, 
        .large .bubble-icon-container {
            --mdc-icon-size: 22px;
            min-width: 36px !important;
            min-height: 36px !important;
        }
        
        .bubble-sub-button.background-on::before,
        .bubble-sub-button.background-off::before,
        .bubble-temperature-container::before,
        .bubble-icon-container::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            opacity: var(--control-number-buttons-background-opacity, .2);
            border-radius: var(--bubble-border-radius);
            background: var(--control-number-buttons-background-color, var(--disabled-color));
        }
        
        .bubble-icon-container::before {
            background: var(--state-inactive-color);
            border-radius: var(--bubble-icon-border-radius);
        }
        
        .bubble-sub-button {
            border: 0px solid transparent !important;
        }
        
        .no-icon-select-arrow {
            right: 4px !important;
        }
        
        .large .bubble-icon-container {
             margin-left: 9px;
        }
        
        .bubble-state {
            opacity: 1;
            font-weight: 400;
            font-size: 12px;
            letter-spacing: .4px;
        }
        
        :not(.bubble-separator) > .bubble-name {
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 0.1px;
        }
        
        .bubble-pop-up-background { 
            filter: brightness(0.96); /* Improve pop-up background contrast */
            --bubble-pop-up-border-radius: calc(var(--ha-card-border-radius, 12px) * 1.4);
        }
        
        ha-select {
            --bubble-list-item-accent-color: none !important;
            --mdc-theme-surface: var(--card-background-color);
        }
        
        mwc-list-item[selected] {
            color: inherit !important;
            --mdc-ripple-press-opacity: 0 !important;
        }
        
        mwc-list-item[selected]::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            background-color: var(--primary-color);
            opacity: 0.24;
        }

@refined-fish
Copy link

Can anyone try this one? 🙂

There are some changes, but it still doesn't seem to be the same as the official cards
Image

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

What's wrong?

Bubble Card above, title card below:

Image

@refined-fish
Copy link

It's so weird, why my button color is darker than the official one

Image

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

Can you share your theme? I will try with it.

@refined-fish
Copy link

Can you share your theme? I will try with it.

I use the theme at https://github.com/basnijholt/lovelace-ios-themes, "ios-dark-green"

I got it, it was caused by the theme differences, the dark background of the official theme was solid, while I used a third-party theme, and the background had a wallpaper.
If the official solid color background is used as a reference to adjust the css of the bubble card, then this will happen when the background is inconsistent with the official solid color background. I'm curious about what form the official card is implemented? I think if the official card display logic cannot be completely copied, there will be a problem that can only be compatible with one topic.

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

Everything should be perfect now 🤞

home-assistant-default:
    name: Home Assistant default styling
    version: "v1.1"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1230"
    description: This module applies Home Assistant’s default styling to Bubble Card. To set it as the default, move it under <code>default:</code> in your YAML file.
    code: |
        :host {
            --bubble-accent-color: rgba(0,170,240,0.6); /* Edit this color if needed */
            --bubble-main-background-color: var(--ha-card-background, var(--card-background-color, #fff));
            --bubble-border-radius: var(--ha-card-border-radius, 12px);
            --bubble-icon-border-radius: 32px;
            --bubble-button-border-radius: var(--bubble-border-radius);
            --bubble-climate-button-background-color: var(--bubble-icon-background-color);
            --bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
            --bubble-secondary-background-color: transparent; 
        }
        
        .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;
        }
        
        .bubble-icon-container, 
        .large .bubble-icon-container {
            --mdc-icon-size: 22px;
            min-width: 36px !important;
            min-height: 36px !important;
        }
        
        .large .bubble-cover-card-container > .bubble-buttons {
            --bubble-cover-main-background-color: none;
        }
        
        .bubble-sub-button.background-on::before,
        .bubble-sub-button.background-off::before,
        .bubble-temperature-container::before,
        .bubble-icon-container::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            opacity: var(--control-number-buttons-background-opacity, .2);
            border-radius: var(--bubble-border-radius);
            background: var(--control-number-buttons-background-color, var(--disabled-color));
        }
        
        .bubble-icon-container::before {
            background: var(--state-inactive-color);
            border-radius: var(--bubble-icon-border-radius);
        }
        
        .bubble-sub-button {
            border: 0px solid transparent !important;
        }
        
        .no-icon-select-arrow {
            right: 4px !important;
        }
        
        .large .bubble-icon-container {
             margin-left: 9px;
        }
        
        .bubble-state {
            opacity: 1;
            font-weight: 400;
            font-size: 12px;
            letter-spacing: .4px;
        }
        
        :not(.bubble-separator) > .bubble-name {
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 0.1px;
        }
        
        .bubble-pop-up-background { 
            filter: brightness(0.96); /* Improve pop-up background contrast */
            --bubble-pop-up-border-radius: calc(var(--ha-card-border-radius, 12px) * 1.4);
        }
        
        .bubble-header-container {
            --bubble-secondary-background-color: var(--background-color-2); 
        }
        
        ha-select {
            --bubble-list-item-accent-color: none !important;
            --mdc-theme-surface: var(--card-background-color);
        }
        
        mwc-list-item[selected] {
            color: inherit !important;
            --mdc-ripple-press-opacity: 0 !important;
        }
        
        mwc-list-item[selected]::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            background-color: var(--primary-color);
            opacity: 0.24;
        }

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

Try this one instead, it should be even better:

home-assistant-default:
    name: Home Assistant default styling
    version: "v1.1"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1230"
    description: This module applies Home Assistant’s default styling to Bubble Card. To set it as the default, move it under <code>default:</code> in your YAML file.
    code: |
        :host {
            --bubble-button-accent-color: rgba(0,140,255,0.3); /* Edit this color if needed */
            --bubble-main-background-color: var(--ha-card-background, var(--card-background-color, #fff));
            --bubble-border-radius: var(--ha-card-border-radius, 12px);
            --bubble-icon-border-radius: 32px;
            --bubble-button-border-radius: var(--bubble-border-radius);
            --bubble-climate-button-background-color: var(--bubble-icon-background-color);
            --bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
            --bubble-secondary-background-color: transparent; 
        }
        
        .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;
        }
        
        .bubble-icon-container, 
        .large .bubble-icon-container {
            --mdc-icon-size: 22px;
            min-width: 36px !important;
            min-height: 36px !important;
        }
        
        .large .bubble-cover-card-container > .bubble-buttons {
            --bubble-cover-main-background-color: none;
        }
        
        .bubble-range-fill {
            --bubble-accent-color: var(--bubble-button-accent-color);
        }
        
        .bubble-sub-button.background-on::before,
        .bubble-sub-button.background-off::before,
        .bubble-temperature-container::before,
        .bubble-icon-container::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            opacity: var(--control-number-buttons-background-opacity, .2);
            border-radius: var(--bubble-border-radius);
            background: var(--control-number-buttons-background-color, var(--disabled-color));
        }
        
        .bubble-icon-container::before {
            background: var(--state-inactive-color);
            border-radius: var(--bubble-icon-border-radius);
        }
        
        .bubble-sub-button {
            border: 0px solid transparent !important;
        }
        
        .no-icon-select-arrow {
            right: 4px !important;
        }
        
        .large .bubble-icon-container {
             margin-left: 9px;
        }
        
        .bubble-state {
            opacity: 1;
            font-weight: 400;
            font-size: 12px;
            letter-spacing: .4px;
        }
        
        :not(.bubble-separator) > .bubble-name {
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 0.1px;
        }
        
        .bubble-pop-up-background { 
            filter: brightness(0.96); /* Improve pop-up background contrast */
            --bubble-pop-up-border-radius: calc(var(--ha-card-border-radius, 12px) * 1.4);
        }
        
        .bubble-header-container {
            --bubble-secondary-background-color: var(--background-color-2); 
        }
        
        ha-select {
            --bubble-list-item-accent-color: none !important;
            --mdc-theme-surface: var(--card-background-color);
        }
        
        mwc-list-item[selected] {
            color: inherit !important;
            --mdc-ripple-press-opacity: 0 !important;
        }
        
        mwc-list-item[selected]::before {
            content: "";
            position: absolute;
            top: 0; 
            left: 0;
            width: 100%; 
            height: 100%;  
            background-color: var(--primary-color);
            opacity: 0.24;
        }

@refined-fish
Copy link

Try this one instead, it should be even better:

The color of the card button is indeed almost consistent when the air conditioner is turned off, looking very harmonious. However, when the air conditioner is turned on, it seems a bit abnormal.

Image

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

This is the default Bubble Card behavior, I can't change everything 😅

You can still change it with some custom styles if you want 🙂

@refined-fish
Copy link

This is the default Bubble Card behavior, I can't change everything 😅

You can still change it with some custom styles if you want 🙂

Hahaha, I'm sure you're almost driven crazy by this question of mine. I fully understand and realize this, so I mentioned above that it might be related to the theme. In any case, thank you very much for your work!🙏

Maybe I should consider switching to the default theme instead of the third-party theme.

Since I am not a worker in the computer-related field, what I can do is limited. Therefore, I am considering reducing the dependency on third parties as much as possible to ensure the long-term sustainability of my family project.

This issue encountered with Bubble Card seems to be prompting me to make this decision, after all, it would be too convenient to be able to directly use the style provided by the author

@Clooos
Copy link
Owner

Clooos commented Feb 17, 2025

Even with the default theme the climate card will look like that, it's just how Bubble Card change cards when they are turned on. This is indeed a bit different with how Home Assistant handle that, but at least it stays consistent with most custom cards.

And don't worry, you helped me understanding my mistakes, you are the only one who sent me feedback on this module 🙂

@refined-fish
Copy link

Even with the default theme the climate card will look like that, it's just how Bubble Card change cards when they are turned on. This is indeed a bit different with how Home Assistant handle that, but at least it stays consistent with most custom cards.

Oh, I see! Hahaha

And don't worry, you helped me understanding my mistakes, you are the only one who sent me feedback on this module 🙂

It's because I really like this project that I hope it can get better!

@Clooos Clooos closed this as completed Feb 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants