main_button_coloring

main_button_coloring:
  name: Main button unified ON color
  version: v1.5
  creator: You 😎
  link: https://github.com/Clooos/Bubble-Card/discussions
  supported:
    - button
    - calendar
    - climate
    - cover
    - horizontal-buttons-stack
    - media-player
    - pop-up
    - select
    - separator
  description: |
    Applies a single color to both the main button background and icon when the entity state is 'on'. Resets styles when not 'on'.
  code: |
    ${(() => {
      const cfg = this.config.main_button_coloring || {};
      const entityId = cfg.entity;
      const entity = hass.states[entityId];
      const state = entity?.state;

      const btn = card.querySelector('.bubble-button-background');
      const icon = card.querySelector('.bubble-icon');

      if (state === 'on') {
        if (btn) btn.style.backgroundColor = cfg.on_color;
        if (icon) icon.style.color = cfg.on_color;
      } else {
        if (btn) btn.style.backgroundColor = '';
        if (icon) icon.style.color = '';
      }
    })()}
  editor:
    - name: entity
      selector:
        entity: {}
    - name: on_color
      label: ON color for background & icon
      selector:
        text: {}