-
-
Notifications
You must be signed in to change notification settings - Fork 88
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
Comments
Yes, all the Bubble cards do. 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! |
PS: really like the double line information in your example (in your Production button, for example). 👍 |
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. 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 However, I do feel the Bubble cards should just follow the standards set by HA. |
Hi again! Check this 😁 |
Hi Clooos, Thanks, and sorry for not replying earlier. |
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: |
- [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.
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:
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! |
Hi friend, I highly recommend you try the latest version, it's much better than the CSS I provided |
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 |
I will check that myself, don't worry 🙂 I will see what are the variables Home Assistant use by default. |
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) |
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. |
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;
} |
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. |
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;
} |
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;
} |
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 |
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 🙂 |
Oh, I see! Hahaha
It's because I really like this project that I hope it can get better! |
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
Expected behavior
Bubble cards should follow any theme chosen by the user.
Informations (please complete the following information):
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! 🍻
The text was updated successfully, but these errors were encountered: