[JS+Editor Module] Conditional Subbutton Colors

[HenryJIII]

Conditional Subbutton Colors

Version: v1.0
Creator: HenryJIII

Important

Unsupported cards:

• Horizontal buttons stack
• Pop-up

Add conditional subbutton coloring to up to 6 subbuttons. Chose a color from the dropdown menu and optionally a condition for when it should be active.
Configure this module via the editor or in YAML, for example:

subbutton_colors:
  subbutton1:
    color: red
    condition:
      - condition: state
        entity_id: sensor.your_entity
        state: "your_state"
  subbutton2:
    color: green

---

🧩 Get this Module

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

subbutton_colors:
  name: Subbutton Colors
  version: "v1.0"
  creator: "HenryJIII"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1311"
  description: This module adds the ability to customize background colors for subbuttons conditionally.

  unsupported:
    - horizontal-buttons-stack
    - pop-up
    - empty-column

  editor:
    - type: expandable
      name: subbutton1
      title: "Subbutton 1"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton2
      title: "Subbutton 2"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton3
      title: "Subbutton 3"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton4
      title: "Subbutton 4"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton5
      title: "Subbutton 5"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton6
      title: "Subbutton 6"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

  code: |
    ${(() => {
        const config = this.config.subbutton_colors || {};

        const hasColor = (subbuttonConfig) => {
            return !!subbuttonConfig?.color;
        };

        const applyColor = (containerSelector, subbuttonConfig) => {
          if (!hasColor(subbuttonConfig)) {
            return;
          }

          const subbutton = card.querySelector(containerSelector);
          if (!subbutton) return;

          if (!subbuttonConfig?.condition || (subbuttonConfig?.condition && checkConditionsMet([].concat(subbuttonConfig.condition), hass))) {
            subbutton.style.backgroundColor = `var(--${subbuttonConfig.color}-color)`;
          } else {
            subbutton.style.backgroundColor = "";
          }
        };

        Object.values(config).forEach((c, index) => {
          let subbuttonNumber = Number(Object.keys(config)[index].replace("subbutton", ""));
          applyColor(`.bubble-sub-button-${subbuttonNumber}`, c);
        });
        })()}

---

Screenshot:

[ossebol]

Just what I needed! I can't get this working for some reason. The module won't appear between all the other added modules.

[ossebol]

It was the cache that needed to be cleared! It can't remember if I've cleared the cache the other times... (I think not). Thanks for your assistance ;)

[jamessimpson007]

Hiya, thanks for creating this module. It's fantastic!

Quick query - I have got the conditional sub-button colors working with state conditions, but I can't get it working with numeric_state or template conditions. Although when I create one of these conditions and test them (using the test button in the dropdown box which confirms that the condition passes), it doesn't seem to be applied in the card. Is this a bug please?

Thanks for your help

[HenryJIII]

I cannot get it to work right now either. I will have look at why in the coming days.

[HenryJIII]

Looks like template conditions are not supported. Numeric conditions should theoretically be working but so far I haven't found a module here where it works. Do you have a module by chance where numerical_state conditions are working?

[Clooos]

Numeric conditions should theoretically be working

This issue is probably on my side, I will check that for the next beta 👌

[jamessimpson007]

thank you.

…

________________________________ From: HenryJIII ***@***.***> Sent: Wednesday, March 12, 2025 1:09:27 PM To: Clooos/Bubble-Card ***@***.***> Cc: jamessimpson007 ***@***.***>; Comment ***@***.***> Subject: Re: [Clooos/Bubble-Card] [JS+Editor Module] Conditional Subbutton Colors (Discussion #1311) I cannot get it to work right now either. I will have look at why in the coming days. — Reply to this email directly, view it on GitHub<#1311 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A7JNR7BVM6KE6RXTFDHSRB32UAWYPAVCNFSM6AAAAABYNDNPM2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBXGQ4DKMA>. You are receiving this because you commented.Message ID: ***@***.***>

[genesisforlive]

thx for this,
is it bossible to make this?

if on than green
if off than blue

[HenryJIII]

Unfortunately not entirely. You could however define the color in the module for one of the states and then additionally set your default color in the styles section

Something like this

subbutton_colors:
  subbutton1:
    color: deep-orange
    condition:
      - condition: state
        entity_id: light.buro
        state: "on"
styles: |-
  .bubble-sub-button-1 {
    background-color: blue;
  }

[viatro]

But if custom styles section is used, then it is much simplier to make a solution completely in it, without a module at all:

styles: |-
  .bubble-sub-button-1 {
    background-color: ${hass.states['light.buro'].state === "on" ? "green" : "blue"};
  }

@HenryJIII It looks like a room for improvement of your module

[genesisforlive]

But if custom styles section is used, then it is much simplier to make a solution completely in it, without a module at all:

styles: |-
  .bubble-sub-button-1 {
    background-color: ${hass.states['light.buro'].state === "on" ? "green" : "blue"};
  }

@HenryJIII It looks like a room for improvement of your module

thix works nice, i hope it comes to a module so its klicky :)

it is possible to use more colores? when i user blue-gray it wont work, or is there i list for the native working colores?

[viatro]

is there i list for the native working colores?

There is a list of color keywords.
But you can use any color by its hex-code, or by using rgb / hsl functions