Bubble-Card
Bubble-Card copied to clipboard
Subbutton Icon Colors - some are dark, some are white [2.5.0.beta.8]
Describe the bug
The subbutton icons are now all dark. Not sure if this was a style choice or not. Either way there is a bug because the new coloring is not applied to all subbuttons. FWIW I liked it better when they were white but I'm sure there is a CSS var for me to restore my preferred color if this was intentional.
When I toggle off .bright-background it goes to the old behavior.
To Reproduce
Use my yaml, swapping out for entities that exist for you. Observe their colors in 2.5.0.beta.7 vs 2.5.0.beta.8.
Expected behavior
I expect the icons to be white or at least consistent.
Screenshots
Top is dark mode and bottom is light mode.
Old Behavior:
New Behavior:
YAML
type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: switch.adaptive_lighting_living_room
entity: switch.adaptive_lighting_living_room
tap_action:
action: toggle
visibility: []
hold_action:
action: more-info
- name: switch.adaptive_lighting_adapt_brightness_living_room
entity: switch.adaptive_lighting_adapt_brightness_living_room
tap_action:
action: toggle
visibility:
- condition: state
entity: switch.adaptive_lighting_living_room
state: "on"
hold_action:
action: more-info
- name: switch.adaptive_lighting_adapt_color_living_room
entity: switch.adaptive_lighting_adapt_color_living_room
tap_action:
action: toggle
visibility:
- condition: state
entity: switch.adaptive_lighting_living_room
state: "on"
hold_action:
action: more-info
- name: switch.adaptive_lighting_sleep_mode_living_room
entity: switch.adaptive_lighting_sleep_mode_living_room
tap_action:
action: toggle
visibility:
- condition: state
entity: switch.adaptive_lighting_living_room
state: "on"
hold_action:
action: more-info
- name: Apply Now
icon: mdi:auto-fix
show_name: false
show_last_changed: false
show_attribute: false
tap_action:
action: perform-action
perform_action: adaptive_lighting.apply
target: {}
data:
entity_id: switch.adaptive_lighting_living_room
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
}
.bubble-sub-button-container {
display: flex !important; width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
columns: 4
Informations (please complete the following information):
- OS: [e.g. iOS]
Windows 10 - Browser/App: [e.g. chrome, safari]
Version 134.0.6998.89 (Official Build) (64-bit) - Bubble Card version: [e.g. 2.0.4]
v2.5.0-beta.8 - Home Assistant version: [e.g. 2024.6.4]
Core 2025.3.3
Supervisor 2025.03.3
Operating System 15.0
Frontend 20250306.0
Additional context
Add any other context about the problem here.
Thank you! 🍻
For anyone that finds this, heres the style to patch it (I'm sure it could be optimized but it works for me):
${(() => {
// https://github.com/Clooos/Bubble-Card/issues/1343
card.querySelectorAll('.bright-background').forEach(element => {
element.classList.remove('bright-background');
});
})()}
I will probably rework that a bit, this was supposed to only improve readability when needed, like a white icon on a white button.