[Styling Module] Sub-button coloring based on entity state

[SilentOcean2017]

Sub-button coloring based on entity condition

Version: 1.4
Creator: LastBitOfCoffee

Important

Supported cards:

• Button
• Separator

Breaking changes: This module offers 2 main features: Lets you change the icon and background color of a sub-button based on its entity's condition and support HVAC entity with multiple actions - each color for each mode cooling/heating/idle. Two features representated in 2 dropdown menus, choose non-HVAC for general entity or HVAC entity for climate entity. All four sub-buttons share the same OFF state colors for unity which you can also modify that.

Disclaimer: This is just a simple module I first created for personal use, I'm not much familiar with JS so please let me know if anything not working properly on your side. The major change (condition picking) got inspired by this module here: #1311 by HenryJIII, many thanks to the author of that module

Here is a hex color picking website that I like: https://www.schemecolor.com/

Changelog:
1.4 - Major breaking change: Using condition instead of previous entity's limited state, still add support for HVAC entity (This might revoke all color setup you had with previous releases +_+ so please only update if you're willing to re-copy those colors over, sorry about that)
1.3 - enabled support for separator
1.2 - added support for climate entity
1.1 - Increased default support to 25 sub-buttons.
1.0 - Initial release.

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

sub_button_coloring:
  defaults:
    off_color: "#353535"
    off_icon_color: "#DBDBDB"
  button_1:
    condition:
      - condition: state
        entity_id: switch.night_stand_zb
        state: "on"
    color: "#957DAD"
    icon_color: "#FFDFD3"
  button_2:
    condition:
      - condition: state
        entity_id: light.master_bedroom_floor_lamp_zb
        state: "on"
    color: "#9DA9C4"
    icon_color: "#6A7284"
  button_3:
    condition:
      - condition: state
        entity_id: switch.xmas_tree_zb
        state: "on"
    color: "#6A8E66"
    icon_color: "#E4E2CF"
  button_4:
    entity: climate.living_room
    idle: "#BCB2B1"
    idle_icon: "#594651"
    cooling: "#C9E1ED"
    cooling_icon: "#706FBB"
    heating: "#eea4a7"
    heating_icon: "#faf2f0"

You can add more sub-buttons under Optional: Editor schema (YAML) by copy and paste one block of code for the extra button (make sure to modify the number of the added sub-buttons, currently there are 4 only), example:

- type: expandable
  name: button_1
  title: Subbutton 1
  icon: mdi:gesture-tap-button
  schema:
    - type: expandable
      title: Condition Settings (Non-HVAC)
      icon: mdi:format-list-checks
      schema:
        - name: condition
          label: All conditions here need to be met for color to apply
          selector:
            condition: {}
        - type: grid
          schema:
            - name: color
              label: Background Color (condition met)
              selector:
                text: {}
            - name: icon_color
              label: Icon Color (condition met)
              selector:
                text: {}
    - type: expandable
      title: HVAC Settings (Climate Entity)
      icon: mdi:thermometer
      schema:
        - name: entity
          label: HVAC Entity
          selector:
            entity:
              domain: climate
        - type: grid
          schema:
            - name: cooling
              label: Cooling - Background
              selector:
                text: {}
            - name: cooling_icon
              label: Cooling - Icon Color
              selector:
                text: {}
            - name: heating
              label: Heating - Background
              selector:
                text: {}
            - name: heating_icon
              label: Heating - Icon Color
              selector:
                text: {}
            - name: idle
              label: Idle - Background
              selector:
                text: {}
            - name: idle_icon
              label: Idle - Icon Color
              selector:
                text: {}

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

sub_button_coloring:
    name: "Sub-button coloring based on entity condition"
    version: "1.4"
    creator: "LastBitOfCoffee"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button
        - separator

    description: |
       Breaking changes: This module offers 2 main features: Lets you change the icon and background color of a sub-button based on its entity's condition and support HVAC entity with multiple actions - each color for each mode cooling/heating/idle. Two features representated in 2 dropdown menus, choose non-HVAC for general entity or HVAC entity for climate entity. All four sub-buttons share the same OFF state colors for unity which you can also modify that. 
        
    code: |
        ${(() => {
          const config = this.config.sub_button_coloring || {};
          const defaults = config.defaults || {};
          
          const applyColor = (selector, subbuttonConfig, entity) => {
            const subbutton = card.querySelector(selector);
            if (!subbutton) return;
            
            const icon = subbutton.querySelector("ha-icon");
            
            // Determine if HVAC-style color logic applies
            const isHvacStyle = subbuttonConfig.cooling || subbuttonConfig.heating || subbuttonConfig.idle;
            const isClimateEntity = entity?.entity_id?.startsWith("climate.");
            
            let bgColor = defaults.off_color || "";
            let iconColor = defaults.off_icon_color || "";
            
            if (isHvacStyle && isClimateEntity) {
              const hvacState = entity.attributes?.hvac_action;
              const bgMap = {
                cooling: subbuttonConfig.cooling,
                heating: subbuttonConfig.heating,
                idle: subbuttonConfig.idle,
              };
              const iconMap = {
                cooling: subbuttonConfig.cooling_icon,
                heating: subbuttonConfig.heating_icon,
                idle: subbuttonConfig.idle_icon,
              };
              
              if (hvacState && bgMap[hvacState]) {
                bgColor = bgMap[hvacState];
                iconColor = iconMap[hvacState] || iconColor;
              }
            } else {
              // Use condition logic for general entities
              const condition = subbuttonConfig.condition;
              const conditionMet = !condition || checkConditionsMet(
                Array.isArray(condition) ? condition : [condition],
                hass
              );
              
              if (conditionMet) {
                bgColor = subbuttonConfig.color || bgColor;
                iconColor = subbuttonConfig.icon_color || iconColor;
              }
            }
            
            // Apply styles
            subbutton.style.backgroundColor = bgColor;
            if (icon) icon.style.color = iconColor;
          };
          
          // Process each button configuration
          Object.entries(config).forEach(([key, cfg]) => {
            if (key === "defaults") return;
            
            const match = key.match(/button_(\d+)/);
            if (!match) return;
            
            const buttonNumber = match[1];
            const entity = cfg.entity ? hass.states[cfg.entity] : null;
            
            applyColor(`.bubble-sub-button-${buttonNumber}`, cfg, entity);
          });
        })()}

    editor:
      - name: defaults
        type: grid
        schema:
          - name: off_color
            label: Default Background (OFF)
            selector:
              text: {}
          - name: off_icon_color
            label: Default Icon (OFF)
            selector:
              text: {}
      - type: expandable
        name: button_1
        title: Subbutton 1
        icon: mdi:gesture-tap-button
        schema:
          - type: expandable
            title: Condition Settings (Non-HVAC)
            icon: mdi:format-list-checks
            schema:
              - name: condition
                label: All conditions here need to be met for color to apply
                selector:
                  condition: {}
              - type: grid
                schema:
                  - name: color
                    label: Background Color (condition met)
                    selector:
                      text: {}
                  - name: icon_color
                    label: Icon Color (condition met)
                    selector:
                      text: {}
          - type: expandable
            title: HVAC Settings (Climate Entity)
            icon: mdi:thermometer
            schema:
              - name: entity
                label: HVAC Entity
                selector:
                  entity:
                    domain: climate
              - type: grid
                schema:
                  - name: cooling
                    label: Cooling - Background
                    selector:
                      text: {}
                  - name: cooling_icon
                    label: Cooling - Icon Color
                    selector:
                      text: {}
                  - name: heating
                    label: Heating - Background
                    selector:
                      text: {}
                  - name: heating_icon
                    label: Heating - Icon Color
                    selector:
                      text: {}
                  - name: idle
                    label: Idle - Background
                    selector:
                      text: {}
                  - name: idle_icon
                    label: Idle - Icon Color
                    selector:
                      text: {}
      - type: expandable
        name: button_2
        title: Subbutton 2
        icon: mdi:gesture-tap-button
        schema:
          - type: expandable
            title: Condition Settings (Non-HVAC)
            icon: mdi:format-list-checks
            schema:
              - name: condition
                label: All conditions here need to be met for color to apply
                selector:
                  condition: {}
              - type: grid
                schema:
                  - name: color
                    label: Background Color (condition met)
                    selector:
                      text: {}
                  - name: icon_color
                    label: Icon Color (condition met)
                    selector:
                      text: {}
          - type: expandable
            title: HVAC Settings (Climate Entity)
            icon: mdi:thermometer
            schema:
              - name: entity
                label: HVAC Entity
                selector:
                  entity:
                    domain: climate
              - type: grid
                schema:
                  - name: cooling
                    label: Cooling - Background
                    selector:
                      text: {}
                  - name: cooling_icon
                    label: Cooling - Icon Color
                    selector:
                      text: {}
                  - name: heating
                    label: Heating - Background
                    selector:
                      text: {}
                  - name: heating_icon
                    label: Heating - Icon Color
                    selector:
                      text: {}
                  - name: idle
                    label: Idle - Background
                    selector:
                      text: {}
                  - name: idle_icon
                    label: Idle - Icon Color
                    selector:
                      text: {}
      - type: expandable
        name: button_3
        title: Subbutton 3
        icon: mdi:gesture-tap-button
        schema:
          - type: expandable
            title: Condition Settings (Non-HVAC)
            icon: mdi:format-list-checks
            schema:
              - name: condition
                label: All conditions here need to be met for color to apply
                selector:
                  condition: {}
              - type: grid
                schema:
                  - name: color
                    label: Background Color (condition met)
                    selector:
                      text: {}
                  - name: icon_color
                    label: Icon Color (condition met)
                    selector:
                      text: {}
          - type: expandable
            title: HVAC Settings (Climate Entity)
            icon: mdi:thermometer
            schema:
              - name: entity
                label: HVAC Entity
                selector:
                  entity:
                    domain: climate
              - type: grid
                schema:
                  - name: cooling
                    label: Cooling - Background
                    selector:
                      text: {}
                  - name: cooling_icon
                    label: Cooling - Icon Color
                    selector:
                      text: {}
                  - name: heating
                    label: Heating - Background
                    selector:
                      text: {}
                  - name: heating_icon
                    label: Heating - Icon Color
                    selector:
                      text: {}
                  - name: idle
                    label: Idle - Background
                    selector:
                      text: {}
                  - name: idle_icon
                    label: Idle - Icon Color
                    selector:
                      text: {}
      - type: expandable
        name: button_4
        title: Subbutton 4
        icon: mdi:gesture-tap-button
        schema:
          - type: expandable
            title: Condition Settings (Non-HVAC)
            icon: mdi:format-list-checks
            schema:
              - name: condition
                label: All conditions here need to be met for color to apply
                selector:
                  condition: {}
              - type: grid
                schema:
                  - name: color
                    label: Background Color (condition met)
                    selector:
                      text: {}
                  - name: icon_color
                    label: Icon Color (condition met)
                    selector:
                      text: {}
          - type: expandable
            title: HVAC Settings (Climate Entity)
            icon: mdi:thermometer
            schema:
              - name: entity
                label: HVAC Entity
                selector:
                  entity:
                    domain: climate
              - type: grid
                schema:
                  - name: cooling
                    label: Cooling - Background
                    selector:
                      text: {}
                  - name: cooling_icon
                    label: Cooling - Icon Color
                    selector:
                      text: {}
                  - name: heating
                    label: Heating - Background
                    selector:
                      text: {}
                  - name: heating_icon
                    label: Heating - Icon Color
                    selector:
                      text: {}
                  - name: idle
                    label: Idle - Background
                    selector:
                      text: {}
                  - name: idle_icon
                    label: Idle - Icon Color
                    selector:
                      text: {}

      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[toma9996]

great module. How can I add additional buttons 5, 6, 7...

If I update yaml and just add "button 5:" it's not working.

[AlkaDragos]

great module. How can I add additional buttons 5, 6, 7...

If I update yaml and just add "button 5:" it's not working.

Hi, that's only for the editor, you also need to modify this line for (let i = 1; i <= 4; i++) { ... } so that it loops through all your buttons, like 5,6,7, etc. :)

@SilentOcean2017 nice module 👍 thanks!

[SilentOcean2017]

great module. How can I add additional buttons 5, 6, 7...

If I update yaml and just add "button 5:" it's not working.

Hey, I just updated the code to support more than 4 buttons. Then just add "button 5" like you did earlier, I did added instructions on that as well.

[bartek810055]

Hi, is there a way to change the 'on' color for devices, like climate controls, that don't have a simple on/off state?

[SilentOcean2017]

Hi, is there a way to change the 'on' color for devices, like climate controls, that don't have a simple on/off state?

Sorry I've been a bit busy lately, I'll take a look and update the module for those cards.

[SilentOcean2017]

Hi, is there a way to change the 'on' color for devices, like climate controls, that don't have a simple on/off state?

Hi, I just updated the code for climate entity, let me know if it works for you.

[poughkeepsee]

Hey, great module! I wanted to use this for my dashboard but I didn't just have on/off entities, I had a bunch more like cover current_position, my lock that reports locked/unlocked etc., so I added that option. Feel free to take a look and use it to update the module if you want to:

${(() => {
  requestAnimationFrame(() => {
    const config = this.config.sub_button_coloring || {};
    const defaults = config.defaults || {};

    for (let i = 1; i <= 25; i++) {
      const item = config[`button_${i}`];
      if (!item || !item.entity) continue;

      const entity = hass.states[item.entity];
      if (!entity) continue;

      // Read state from attribute or state
      let state;
      if (item.state_attribute && entity.attributes?.[item.state_attribute] != null) {
        state = entity.attributes[item.state_attribute];
      } else {
        const rawState = entity.state;
        state = isNaN(rawState) ? rawState : parseFloat(rawState);
      }

      const buttonClass = `.bubble-sub-button-${i}`;
      const buttonEl = card.querySelector(buttonClass);
      const iconEl = card.querySelector(`${buttonClass} ha-icon`);

      let isActive = false;
      let rangeColor = null;

      // Handle state_ranges logic
      if (item.state_ranges && typeof state === "number") {
        for (const range of item.state_ranges) {
          if (state >= range.min && state <= range.max) {
            rangeColor = range.color;
            isActive = true;
            break;
          }
        }
      }

      // Handle active_states if no rangeColor was applied
      if (!rangeColor && item.active_states) {
        isActive = item.active_states.includes(state);
      }

      // Handle numeric condition
      if (!rangeColor && item.state_condition) {
        const val = item.state_condition.value;
        const op = item.state_condition.operator;
        switch (op) {
          case '>': isActive = state > val; break;
          case '>=': isActive = state >= val; break;
          case '<': isActive = state < val; break;
          case '<=': isActive = state <= val; break;
          case '==': isActive = state == val; break;
          case '!=': isActive = state != val; break;
        }
      }

      // Assign colors
      const onBg = item.on_color;
      const offBg = item.off_color ?? defaults.off_color;
      const onIcon = item.on_icon_color;
      const offIcon = item.off_icon_color ?? defaults.off_icon_color;

      const bg = rangeColor ?? (isActive ? onBg : offBg);
      const icon = rangeColor ? onIcon : (isActive ? onIcon : offIcon);

      if (buttonEl) {
        buttonEl.style.backgroundColor = bg;
      }
      if (iconEl && icon) {
        iconEl.style.color = icon;
      }
    }
  });
})()}

[poughkeepsee]

To add, here's a couple examples I used it for:

#lock state
button_1:
  entity: lock.aqara
  active_states:
    - locked
  on_color: "#88d8b0"
  off_color: "#ff6f69"


#count (above certain value)
button_2:
  entity: sensor.count_lights_on
  on_color: "#cc9b70"
  state_condition:
    operator: ">"
    value: 0


#current position of shutters
button_4:
  entity: cover.living_room_shutters
  state_attribute: current_position
  state_ranges:
    - min: 0
      max: 50
      color: "#d8b8e6"
    - min: 51
      max: 85
      color: "#96ceb4"
    - min: 86
      max: 100
      color: "#468c8a"

[SilentOcean2017]

To add, here's a couple examples I used it for:

#lock state
button_1:
  entity: lock.aqara
  active_states:
    - locked
  on_color: "#88d8b0"
  off_color: "#ff6f69"


#count (above certain value)
button_2:
  entity: sensor.count_lights_on
  on_color: "#cc9b70"
  state_condition:
    operator: ">"
    value: 0


#current position of shutters
button_4:
  entity: cover.living_room_shutters
  state_attribute: current_position
  state_ranges:
    - min: 0
      max: 50
      color: "#d8b8e6"
    - min: 51
      max: 85
      color: "#96ceb4"
    - min: 86
      max: 100
      color: "#468c8a"

Thanks a lot for sharing! I’ll try to implement your part in the next updates when I have more time. I just added the climate card for now, appreciate your sharing again!

[Schocker360]

I am really enjoying your module. Thank you for the time you've put into developing it and sharing it.

As an alternative to using specific states, I am wondering if it's possible to use conditions. You could allow the user to set a default color for the icon and background. In each sub-button, add a condition option and if that condition is met then set the color of the icon and/or background based on the colors selected under each sub-button. I was a developer a long time ago so I tried my hand at switching to conditions based instead of state based however I can't quite seem to get it to recognize when the condition is true to set the color accordingly. I'll keep working at it but I thought I would make the suggestion here in case you feel its a good idea and if so you figure it out before I do 😄

[Schocker360]

Just to close this loop here... I was able to solve this slightly differently. Keep up the great work @SilentOcean2017

[SilentOcean2017]

Just to close this loop here... I was able to solve this slightly differently. Keep up the great work @SilentOcean2017

Hi, I actually just came accross the module with condition as state someone linked below so I did a major change for mine which includes that feature but still retains the HVAC support (v1.4). I still keep hex color input for flexiblility. Feel free to take a look at that, and thank you for the suggestion. I did not know we can actually use condition picking in UI like that, and tbh I'm not a coder by any mean :D, i'm just learning on the go, please let me know if you find something incorrect. Much appreciated!

[Vincentiano]

Great module, thank you! 😄
Could you add support for the Separator card as well?
The sub-button implementation should be the same. I have tested it by simply extending the support and it seems to work fine for me:

sub_button_coloring:
    name: "Sub-button coloring based on entity state"
    version: "1.2"
    creator: "LastBitOfCoffee"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button
        - separator
 
...etc...etc...
      

I have noticed that [JS+Editor Module] Conditional Subbutton Colors seems to work similarly and has the following support. So maybe support can be extended even further?

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

Thank you in advance!

[SilentOcean2017]

Great module, thank you! 😄 Could you add support for the Separator card as well? The sub-button implementation should be the same. I have tested it by simply extending the support and it seems to work fine for me:

sub_button_coloring:
    name: "Sub-button coloring based on entity state"
    version: "1.2"
    creator: "LastBitOfCoffee"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button
        - separator
 
...etc...etc...
      

I have noticed that [JS+Editor Module] Conditional Subbutton Colors seems to work similarly and has the following support. So maybe support can be extended even further?

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

Thank you in advance!

Hey I added the line for separator, thanks a lot for letting me know, somehow I missed that +__+. So far it only supports button and separator, but the horizontal-buttons-stack buttons should be doable yet I think it should be added as a new module. Or I need to rethink how to work on this module to make it more flexible rather than hard-coding features. Anyways I will take a look at that when I have some spare time.

[Vincentiano]

Awesome, thank you!

[SilentOcean2017]

1.4 - Major breaking change: Using condition instead of previous entity's limited state, still add support for HVAC entity
Two features representated in 2 dropdown menus, choose non-HVAC for general entity or HVAC entity for climate entity.