[JS+Editor Module] IzeQubes Custom Colors

[IzeQube]

IzeQubes Custom Colors

Version: v1.0
Creator: IzeQube

Important

Unsupported cards:

• Horizontal buttons stack
• Separator

Allows the user to change the accent color of the card with the standard Home Assistant predefined colors.
This change only effects the card if the entity is "turned on".

The user can also override the icon color and background background of the icon container.

Last but not least the user can change the opacity of both the card background color as the icon.

Configure this module via the editor or in YAML, for example:

izequbes_custom_colors:
  card:
    background_color: blue
    opacity: 0.2

---

🧩 Get this Module

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

izequbes_custom_colors:
    name: "IzeQubes Custom Colors"
    version: "v1.0"
    creator: "IzeQube"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1246"

    unsupported:
        - horizontal-buttons-stack
        - separator

    description: |
      Allows the user to change the accent color of the card with the standard Home Assistant predefined colors.
      This change only effects the card if the entity is "turned on".

      The user can also override the icon color and background background of the icon container.

      Last but not least the user can change the opacity of both the card background color as the icon.
    code: |
      ${(() => {
        // Icon Color
        let bubbleIcon = card.querySelector(".bubble-icon");
        if(bubbleIcon && this.config.izequbes_custom_colors.main_icon) {
          if(!!this.config.izequbes_custom_colors.main_icon.icon_opacity) {
            bubbleIcon.style.opacity = this.config.izequbes_custom_colors.main_icon.icon_opacity;
          }
          if(!!this.config.izequbes_custom_colors.main_icon.icon_color) {
            bubbleIcon.style.color = `var(--${this.config.izequbes_custom_colors.main_icon.icon_color}-color)`;
          }
        }

        // Icon Background
        let bubbleIconContainer = card.querySelector(".bubble-icon-container");
        if(bubbleIconContainer && this.config.izequbes_custom_colors.main_icon) {
          if(!!this.config.izequbes_custom_colors.main_icon.background_color) {
            bubbleIconContainer.style.background = `var(--${this.config.izequbes_custom_colors.main_icon.background_color}-color)`;
          }
        }

        // Card Color
        if(this.config.izequbes_custom_colors.card) {
          if(!!this.config.izequbes_custom_colors.card.background_color) {
            card.style.setProperty('--bubble-accent-color', `var(--${this.config.izequbes_custom_colors.card.background_color}-color)`);
          }
          if(!!this.config.izequbes_custom_colors.card.opacity) {
            card.querySelector(".bubble-button-background").style.opacity = this.config.izequbes_custom_colors.card.opacity;
          }
        }

      })()}

    editor:
      - name: main_icon
        type: expandable
        title: "Main Icon Color Settings"
        icon: "mdi:list-box-outline"
        schema:
          - type: "string"
            name: "background_color"
            label: "Background Color"
            selector:
              ui_color: {}
          - name: "icon_color"
            label: "Icon Color"
            selector:
              ui_color: {}
          - name: "icon_opacity"
            label: "Icon Opacity"
            selector:
              number: {
                min: 0,
                max: 1,
                step: 0.1,
                mode: "slider"
              }
      - name: card
        type: expandable
        title: "Card Color Settings"
        icon: "mdi:list-box-outline"
        schema:
          - name: "background_color"
            label: "Background Color"
            selector:
              ui_color: {
                include_none: true
              }
          - name: "opacity"
            label: "Opacity"
            selector:
              number: {
                min: 0,
                max: 1,
                step: 0.1,
                mode: "slider"
              }

---

Screenshot:

[Clooos]

Hi! I just checked your code, and this is brilliant:

bubbleIcon.style.color = `var(--${this.config.izequbes_custom_colors.main_icon.icon_color}-color)`;

I was not aware that Home Assistant had variables for all these colors! That's why I've added an example with RGB colors 😅

I will update mine with this approach, it's a lot sexier! 😃

Thank you!

[IzeQube]

Thanks.

Yes, I really wanted the use the Color picker that Home Assistant uses for the tile card.

[Clooos]

I'm using my own cards so much that I don't even really know all the possibilities of the others 🫠

[edcoppen]

First off, I love the idea of one module controlling all colour options. Thank you.

I'm noticing some odd behaviour though. I have custom border radius set through default config.

If I enable your module on a slider button it works as expected. However, if I enable it on a name/text button then the custom border radius is lost.

Is this likely related to this module or better directed at Clooos?