Bubble-Card icon indicating copy to clipboard operation
Bubble-Card copied to clipboard

Subbutton Icon Colors - some are dark, some are white [2.5.0.beta.8]

Open StaleLoafOfBread opened this issue 8 months ago • 2 comments
trafficstars

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: Image Image

New Behavior: Image Image

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! 🍻

StaleLoafOfBread avatar Mar 19 '25 02:03 StaleLoafOfBread

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');
    });
  })()}

StaleLoafOfBread avatar Mar 19 '25 04:03 StaleLoafOfBread

I will probably rework that a bit, this was supposed to only improve readability when needed, like a white icon on a white button.

Clooos avatar Mar 19 '25 07:03 Clooos