[JS+Editor Module] Customize the icon container color

[Clooos]

Customize the icon container color

Version: v1.2
Creator: Clooos

Important

Unsupported cards:

• Horizontal buttons stack
• Separator

A list of predefined colors to customize the icon container color.
Configure this module via the editor or in YAML, for example:

icon_container_color: 
    color: light-blue

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

icon_container_color:
  name: 'Example: Customize the icon container color'
  version: v1.2
  creator: Clooos
  supported:
    - calendar
    - pop-up
    - cover
    - button
    - media-player
    - climate
    - select
  description: |
    A list of predefined colors to customize the icon container color.
    Configure this module via the editor or in YAML, for example:
    <br><br>
    <code-block><pre>
    icon_container_color: 
        color: light-blue
    </pre></code-block>
  code: |
    .bubble-icon-container,
    .bubble-day-chip {
      opacity: 1 !important;
      --bubble-icon-background-color: var(--${this.config.icon_container_color?.color}-color) !important;
    }
  editor:
    - name: color
      label: Color
      selector:
        ui_color:
          include_none: true

---

Screenshot:

[Clooos]

Updated to v1.1:

Breaking change: This module now use a list of predefined colors instead of an RGB color picker.

[Clooos]

Updated to v1.2:

Added support for the calendar card.