[Styling Module, JS+Editor Module] Smart Sub-button Icons Styling Module

[MadMan-Y]

Smart Sub-button Styling

Version: 1.2
Creator: MadMan

Important

Supported cards:

• Button
• Separator
• Sub Buttons
• Horizontal Buttons Stack
• Pop Up

Automatically style sub-buttons based on entity type with dynamic colors.

Features:

• Auto-detection: Light colors (RGB matching), climate HVAC modes, auto icons
• Icon control: Condition-based, HVAC modes, On/Off states
• Entity override: Dropdown to treat any entity as Light/Climate/Switch
• Conditions: Custom colors and icons based on HA automation conditions
• UI: Organized expandable sections, 22 color names + custom RGBA
• Performance: Optimized for up to 20 buttons, ~85% faster processing
• Flexibility: Disable auto-detection toggle for full manual control
• Backward compatible: v1.0/v1.1 configs work automatically

Note: UI editor shows 8 buttons, but any number of sub-buttons are supported via YAML config.

Built-in Color Names:
red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or custom RGBA values.

---

🧩 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/modules/smart_sub_button_styling.yaml file.

smart_sub_button_styling:
  name: Smart Sub-button Styling
  version: 1.2
  creator: MadMan
  supported:
    - button
    - separator
    - sub-buttons
    - horizontal-buttons-stack
    - pop-up
  unsupported:
    - cover
    - empty-column
    - media-player
    - select
  description: |
    Automatically style sub-buttons based on entity type with dynamic colors and icons.
    Supports up to 20 sub-buttons (optimized for performance)!
    - Light entities: Icon and background change based on light color (grey if white), auto lightbulb-off icon when off
    - Climate entities: Icon and background change based on HVAC mode, icons auto-applied
    - Other entities: Use conditions (same as Home Assistant automation conditions)
    - Dropdown to treat entity as: Auto-detect, Light, Climate, or Switch
    - Icon control: Three modes - Condition-based, HVAC modes (6 modes + off), On/Off states
    - Organized UI: Separate expandable sections for Color Styling and Icon Styling
    - 22 built-in color names: red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or custom RGBA
    Note: UI editor shows 8 buttons, but up to 20 sub-buttons are supported via YAML config.
  code: |
    ${(() => {
      // Ensure card and hass are available
      if (!card || !hass || !this.config) return;
      
      const config = this.config.smart_sub_button_styling || {};
      const cardConfig = this.config.sub_button;
      
      // Early exit if no config
      if (Object.keys(config).length === 0) return;
      
      // Function to get entity from sub-button config - CALLED ONCE
      const getAllEntities = (subButtonList) => {
        if (!subButtonList) return [];
        
        // Flatten nested groups from main and bottom sections
        const allButtons = [];
        if (subButtonList.main) {
          subButtonList.main.forEach(section => {
            if (section.group) {
              allButtons.push(...section.group);
            } else {
              allButtons.push(section);
            }
          });
        }
        if (subButtonList.bottom) {
          subButtonList.bottom.forEach(section => {
            if (section.group) {
              allButtons.push(...section.group);
            } else {
              allButtons.push(section);
            }
          });
        }
        
        return allButtons;
      };
      
      // Cache the entity list - build once, use many times
      const entityList = getAllEntities(cardConfig);
      
      // Define color maps once for all buttons (performance optimization)
      const colorNames = {
        red: 'rgba(231, 76, 60, 1)',
        blue: 'rgba(52, 152, 219, 1)',
        green: 'rgba(46, 204, 113, 1)',
        yellow: 'rgba(241, 196, 15, 1)',
        orange: 'rgba(230, 126, 34, 1)',
        purple: 'rgba(155, 89, 182, 1)',
        pink: 'rgba(233, 30, 99, 1)',
        cyan: 'rgba(0, 188, 212, 1)',
        grey: 'rgba(149, 165, 166, 1)',
        gray: 'rgba(149, 165, 166, 1)',
        white: 'rgba(236, 240, 241, 1)',
        black: 'rgba(44, 62, 80, 1)',
        'deep-purple': 'rgba(103, 58, 183, 1)',
        'deep-blue': 'rgba(33, 150, 243, 1)',
        'deep-orange': 'rgba(255, 87, 34, 1)',
        amber: 'rgba(255, 193, 7, 1)',
        lime: 'rgba(205, 220, 57, 1)',
        teal: 'rgba(0, 150, 136, 1)',
        indigo: 'rgba(63, 81, 181, 1)',
        brown: 'rgba(121, 85, 72, 1)',
        'light-blue': 'rgba(3, 169, 244, 1)',
        'light-green': 'rgba(139, 195, 74, 1)',
      };
      
      const bgColorNames = {
        red: 'rgba(231, 76, 60, 0.2)',
        blue: 'rgba(52, 152, 219, 0.2)',
        green: 'rgba(46, 204, 113, 0.2)',
        yellow: 'rgba(241, 196, 15, 0.2)',
        orange: 'rgba(230, 126, 34, 0.2)',
        purple: 'rgba(155, 89, 182, 0.2)',
        pink: 'rgba(233, 30, 99, 0.2)',
        cyan: 'rgba(0, 188, 212, 0.2)',
        grey: 'rgba(149, 165, 166, 0.2)',
        gray: 'rgba(149, 165, 166, 0.2)',
        white: 'rgba(236, 240, 241, 0.2)',
        black: 'rgba(44, 62, 80, 0.2)',
        'deep-purple': 'rgba(103, 58, 183, 0.2)',
        'deep-blue': 'rgba(33, 150, 243, 0.2)',
        'deep-orange': 'rgba(255, 87, 34, 0.2)',
        amber: 'rgba(255, 193, 7, 0.2)',
        lime: 'rgba(205, 220, 57, 0.2)',
        teal: 'rgba(0, 150, 136, 0.2)',
        indigo: 'rgba(63, 81, 181, 0.2)',
        brown: 'rgba(121, 85, 72, 0.2)',
        'light-blue': 'rgba(3, 169, 244, 0.2)',
        'light-green': 'rgba(139, 195, 74, 0.2)',
      };
      
      // HVAC icon map - defined once
      const hvacIconDefaults = {
        auto: 'mdi:autorenew',
        cool: 'mdi:snowflake',
        heat: 'mdi:fire',
        dry: 'mdi:water-percent',
        heat_cool: 'mdi:sun-snowflake',
        fan_only: 'mdi:fan',
        off: 'mdi:snowflake-off'
      };
      
      const applyStyle = (subbutton, icon, subbuttonConfig = {}, entity) => {
        // Early exit if no entity
        if (!entity) return;
        
        // Check if auto-detection is disabled for this button
        const autoDetectionDisabled = subbuttonConfig?.disable_auto_detection === true;
        
        let isLight = !autoDetectionDisabled && entity?.entity_id?.startsWith('light.');
        let isClimate = !autoDetectionDisabled && entity?.entity_id?.startsWith('climate.');
        
        // Handle entity_type dropdown (auto, light, climate, switch)
        // Backward compatibility: convert old boolean fields to new dropdown value
        let entityType = subbuttonConfig?.entity_type || 'auto';
        if (!subbuttonConfig?.entity_type) {
          // Check for old boolean fields
          if (subbuttonConfig?.treat_as_light) {
            entityType = 'light';
          } else if (subbuttonConfig?.treat_as_climate) {
            entityType = 'climate';
          } else if (subbuttonConfig?.treat_as_switch) {
            entityType = 'switch';
          }
        }
        
        // Only apply entity_type override if auto-detection is not disabled
        if (!autoDetectionDisabled) {
          if (entityType === 'light') {
            isLight = true;
            isClimate = false;
          } else if (entityType === 'climate') {
            isClimate = true;
            isLight = false;
          }
        }
        // entityType 'switch' is handled in treat_as_switch logic below
        // entityType 'auto' uses the default detection above
        
        let bgColor = '';
        let iconColor = '';
        
        if (isLight && entity.state === 'on') {
          // Light entity styling
          if (entity.attributes?.rgb_color) {
            const [r, g, b] = entity.attributes.rgb_color;
            const isWhite = r > 240 && g > 240 && b > 240;
            iconColor = isWhite ? 'rgba(150, 150, 150, 1)' : `rgba(${r}, ${g}, ${b}, 1)`;
            bgColor = `rgba(${r}, ${g}, ${b}, 0.2)`;
          } else {
            iconColor = 'rgba(255, 193, 7, 1)';
            bgColor = 'rgba(255, 193, 7, 0.2)';
          }
        } else if (isClimate) {
          // Climate entity styling
          const state = entity.state;
          const colorMap = {
            heat: { icon: 'rgba(231, 76, 60, 1)', bg: 'rgba(231, 76, 60, 0.2)' },
            on: { icon: 'rgba(231, 76, 60, 1)', bg: 'rgba(231, 76, 60, 0.2)' },
            cool: { icon: 'rgba(52, 152, 219, 1)', bg: 'rgba(52, 152, 219, 0.2)' },
            heat_cool: { icon: 'rgba(155, 89, 182, 1)', bg: 'rgba(155, 89, 182, 0.2)' },
            auto: { icon: 'rgba(155, 89, 182, 1)', bg: 'rgba(155, 89, 182, 0.2)' },
            dry: { icon: 'rgba(241, 196, 15, 1)', bg: 'rgba(241, 196, 15, 0.2)' },
            fan_only: { icon: 'rgba(46, 204, 113, 1)', bg: 'rgba(46, 204, 113, 0.2)' },
          };
          
          if (colorMap[state]) {
            iconColor = colorMap[state].icon;
            bgColor = colorMap[state].bg;
          }
        } else {
          // Other entities - use conditions
          const condition = subbuttonConfig?.condition;
          let conditionMet;
          
          // Cache condition result to avoid duplicate evaluation
          if (condition) {
            conditionMet = checkConditionsMet(
              Array.isArray(condition) ? condition : [condition],
              hass
            );
          } else {
            conditionMet = true; // No condition = always met
          }
          
          // Handle treat_as_switch - customizable icon/bg color when on
          // Backward compatibility: check both new dropdown and old boolean
          if (entityType === 'switch' || subbuttonConfig?.treat_as_switch) {
            if (entity.state === 'on') {
              // Use custom colors if provided, otherwise default to red icon only
              if (subbuttonConfig?.switch_on_icon_color) {
                const colorName = subbuttonConfig.switch_on_icon_color.toLowerCase();
                iconColor = colorNames[colorName] || subbuttonConfig.switch_on_icon_color;
              } else {
                iconColor = 'rgba(231, 76, 60, 1)'; // Default red
              }
              
              if (subbuttonConfig?.switch_on_bg_color) {
                const colorName = subbuttonConfig.switch_on_bg_color.toLowerCase();
                bgColor = bgColorNames[colorName] || subbuttonConfig.switch_on_bg_color;
              }
              // No default background color
            }
          } else if (conditionMet) {
            if (subbuttonConfig?.icon_color) {
              const colorName = subbuttonConfig.icon_color.toLowerCase();
              iconColor = colorNames[colorName] || subbuttonConfig.icon_color;
            }
            if (subbuttonConfig?.bg_color) {
              const colorName = subbuttonConfig.bg_color.toLowerCase();
              bgColor = bgColorNames[colorName] || subbuttonConfig.bg_color;
            }
          } else {
            // Condition not met - use alternative colors if provided
            if (subbuttonConfig?.icon_color_not_met) {
              const colorName = subbuttonConfig.icon_color_not_met.toLowerCase();
              iconColor = colorNames[colorName] || subbuttonConfig.icon_color_not_met;
            }
            if (subbuttonConfig?.bg_color_not_met) {
              const colorName = subbuttonConfig.bg_color_not_met.toLowerCase();
              bgColor = bgColorNames[colorName] || subbuttonConfig.bg_color_not_met;
            }
          }
        }
        
        // Apply styles
        if (bgColor) subbutton.style.backgroundColor = bgColor;
        if (iconColor && icon) icon.style.color = iconColor;
        
        // Apply icon change based on configuration type
        let iconName = null;
        
        // Auto-detect entity if not specified
        const iconEntity = subbuttonConfig?.icon_entity ? hass.states[subbuttonConfig.icon_entity] : entity;
        
        // Check which icon mode is configured
        const hasConditionIcons = !!(subbuttonConfig?.icon_condition_met || subbuttonConfig?.icon_condition_not_met);
        const hasHvacIcons = !!(
          subbuttonConfig?.icon_auto ||
          subbuttonConfig?.icon_cool ||
          subbuttonConfig?.icon_heat ||
          subbuttonConfig?.icon_dry ||
          subbuttonConfig?.icon_heat_cool ||
          subbuttonConfig?.icon_fan_only ||
          subbuttonConfig?.icon_off
        );
        const hasOnOffIcons = !!(subbuttonConfig?.icon_on || subbuttonConfig?.icon_off_state);
        
        // Auto-apply HVAC icons for climate entities even if not configured (unless auto-detection disabled)
        const isClimateForIcon = !autoDetectionDisabled && iconEntity?.entity_id?.startsWith?.('climate.');
        
        if (isClimateForIcon) {
          // Climate entity - use HVAC icons (configured or default)
          const hvacState = iconEntity.state;
          const hvacIconMap = {
            auto: subbuttonConfig?.icon_auto || hvacIconDefaults.auto,
            cool: subbuttonConfig?.icon_cool || hvacIconDefaults.cool,
            heat: subbuttonConfig?.icon_heat || hvacIconDefaults.heat,
            dry: subbuttonConfig?.icon_dry || hvacIconDefaults.dry,
            heat_cool: subbuttonConfig?.icon_heat_cool || hvacIconDefaults.heat_cool,
            fan_only: subbuttonConfig?.icon_fan_only || hvacIconDefaults.fan_only,
            off: subbuttonConfig?.icon_off || hvacIconDefaults.off
          };
          if (hvacState && hvacIconMap[hvacState]) {
            iconName = hvacIconMap[hvacState];
          }
        } else if (hasOnOffIcons && iconEntity && ['on', 'off'].includes(iconEntity.state)) {
          // On/Off state icons
          if (iconEntity.state === 'on' && subbuttonConfig.icon_on) {
            iconName = subbuttonConfig.icon_on;
          } else if (iconEntity.state === 'off' && subbuttonConfig.icon_off_state) {
            iconName = subbuttonConfig.icon_off_state;
          }
        } else if (hasConditionIcons) {
          // Condition-based icons - uses the main button entity (from conditions)
          const iconCondition = subbuttonConfig?.icon_condition;
          let iconConditionMet;
          
          // Reuse color condition result if same condition (performance optimization)
          if (iconCondition && subbuttonConfig?.condition && 
              JSON.stringify(iconCondition) === JSON.stringify(subbuttonConfig.condition)) {
            // Same condition as colors - reuse the cached result
            iconConditionMet = conditionMet;
          } else if (iconCondition) {
            // Different condition - evaluate it
            iconConditionMet = checkConditionsMet(
              Array.isArray(iconCondition) ? iconCondition : [iconCondition],
              hass
            );
          } else {
            iconConditionMet = true; // No condition = always met
          }
          
          if (iconConditionMet && subbuttonConfig?.icon_condition_met) {
            iconName = subbuttonConfig.icon_condition_met;
          } else if (!iconConditionMet && subbuttonConfig?.icon_condition_not_met) {
            iconName = subbuttonConfig.icon_condition_not_met;
          }
        }
        
        // Auto-apply lightbulb-off for lights when off (if no custom icon and auto-detection not disabled)
        if (!iconName && !autoDetectionDisabled && iconEntity?.entity_id?.startsWith?.('light.') && iconEntity.state === 'off') {
          iconName = 'mdi:lightbulb-off';
        }
        
        // Apply icon if determined
        if (iconName) {
          const oldIcon = subbutton.querySelector('ha-icon, iron-icon, svg');
          if (oldIcon) {
            try {
              if ('icon' in oldIcon) {
                oldIcon.icon = iconName;
              } else {
                oldIcon.setAttribute('icon', iconName);
              }
            } catch (e) {
              try {
                const newIcon = document.createElement('ha-icon');
                newIcon.setAttribute('icon', iconName);
                newIcon.className = oldIcon.className || '';
                newIcon.style.cssText = oldIcon.style?.cssText || '';
                oldIcon.replaceWith(newIcon);
              } catch (e) {
                // Silent fail
              }
            }
          }
        }
        
        // If no colors were set, clear custom styles to use Bubble Card defaults
        if (!bgColor) subbutton.style.backgroundColor = '';
        if (!iconColor && icon) icon.style.color = '';
      };
      
      // Process buttons with auto-detection - hard limit of 20 buttons for performance
      const MAX_BUTTONS = 20;
      
      for (let buttonIndex = 0; buttonIndex < MAX_BUTTONS; buttonIndex++) {
        const buttonNumber = buttonIndex + 1;
        const selector = `.bubble-sub-button-${buttonNumber}`;
        
        // Check if this sub-button exists in DOM
        const subbutton = card.querySelector(selector);
        if (!subbutton) {
          // Stop at first missing button to avoid unnecessary queries
          break;
        }
        
        // Get entity from cached list or manual config
        const entityId = entityList[buttonIndex]?.entity || config[`button_${buttonNumber}`]?.entity;
        
        if (entityId) {
          const entity = hass.states[entityId];
          if (entity) {
            const cfg = config[`button_${buttonNumber}`] || {};
            // Query icon once and pass it
            const icon = subbutton.querySelector('ha-icon');
            // Pass the already-queried DOM elements instead of querying inside
            applyStyle(subbutton, icon, cfg, entity);
          }
        }
      }
    })()}
  editor:
    - type: expandable
      name: button_1
      title: Subbutton 1
      icon: mdi:numeric-1-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_2
      title: Subbutton 2
      icon: mdi:numeric-2-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_3
      title: Subbutton 3
      icon: mdi:numeric-3-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_4
      title: Subbutton 4
      icon: mdi:numeric-4-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_5
      title: Subbutton 5
      icon: mdi:numeric-5-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_6
      title: Subbutton 6
      icon: mdi:numeric-6-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_7
      title: Subbutton 7
      icon: mdi:numeric-7-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

    - type: expandable
      name: button_8
      title: Subbutton 8
      icon: mdi:numeric-8-box
      schema:
        - name: entity
          label: Entity ID (optional - auto-detected from sub-button)
          selector:
            entity: {}
        - name: disable_auto_detection
          label: Disable Auto-Detection (colors & icons)
          selector:
            boolean: {}
        - name: entity_type
          label: Treat Entity As
          selector:
            select:
              mode: dropdown
              options:
                - label: Auto-detect
                  value: auto
                - label: Light
                  value: light
                - label: Climate
                  value: climate
                - label: Switch
                  value: switch
        - type: expandable
          title: Color Styling
          icon: mdi:palette
          schema:
            - name: switch_on_icon_color
              label: Switch On Icon Color (optional, default red)
              selector:
                text:
                  placeholder: red
            - name: switch_on_bg_color
              label: Switch On Background Color (optional, default none)
              selector:
                text:
                  placeholder: red
            - name: condition
              label: Condition for color to apply
              selector:
                condition: {}
            - name: icon_color
              label: Icon Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: bg_color
              label: Background Color (red, blue, green, yellow, orange, purple, pink, cyan, deep-purple, deep-blue, deep-orange, amber, lime, teal, indigo, brown, light-blue, light-green, grey, white, black, or rgba)
              selector:
                text:
                  placeholder: red
            - name: icon_color_not_met
              label: Icon Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
            - name: bg_color_not_met
              label: Background Color When Condition Not Met (optional)
              selector:
                text:
                  placeholder: grey
        - type: expandable
          title: Icon Styling
          icon: mdi:image-outline
          schema:
            - type: expandable
              title: Condition-based Icons
              icon: mdi:format-list-checks
              schema:
                - name: icon_condition
                  label: Condition for icon to change
                  selector:
                    condition: {}
                - name: icon_condition_met
                  label: Icon when condition is met
                  selector:
                    icon: {}
                - name: icon_condition_not_met
                  label: Icon when condition is not met
                  selector:
                    icon: {}
            - type: expandable
              title: HVAC Mode Icons
              icon: mdi:thermometer
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_auto
                  label: Auto mode icon
                  selector:
                    icon: {}
                - name: icon_cool
                  label: Cool mode icon
                  selector:
                    icon: {}
                - name: icon_heat
                  label: Heat mode icon
                  selector:
                    icon: {}
                - name: icon_dry
                  label: Dry mode icon
                  selector:
                    icon: {}
                - name: icon_heat_cool
                  label: Heat/Cool mode icon
                  selector:
                    icon: {}
                - name: icon_fan_only
                  label: Fan only mode icon
                  selector:
                    icon: {}
                - name: icon_off
                  label: Off mode icon
                  selector:
                    icon: {}
            - type: expandable
              title: On/Off State Icons
              icon: mdi:toggle-switch
              schema:
                - name: icon_entity
                  label: Entity for Icon (optional - uses button entity by default)
                  selector:
                    entity: {}
                - name: icon_on
                  label: Icon when state is on
                  selector:
                    icon: {}
                - name: icon_off_state
                  label: Icon when state is off
                  selector:
                    icon: {}

---

Screenshot:

[Clooos]

Hi! This seems like a nice module but you've changed the discussion template too much and so the Module Store isn't able to display your module correctly.

[Clooos]

You don't have to delete this one, just redo the structure of this post, check one of my modules for example.

[MadMan-Y]

Done.

[Clooos]

Perfect! Much better! 😄

Edit: But why v2.3.1? AI wrong decision? 😅

[MadMan-Y]

It took a while and many iterations to get to the final version with Claude AI, so I numbered the versions to avoid confusion during the process. Since it's now officially out, I will mark it as v1.0.

[Clooos]

This makes a lot more sense indeed since this is your initial release.

[MadMan-Y]

V1.1 is now available!
Added support for conditional icons with auto-detection and icons for light and climate entities.

[antoinebreban]

Hello, I was wondering how I can change the background color of a sub-button card using styles (.bubble-something {}) If you can help me on this

[MadMan-Y]

use the following in the styles section:
.bubble-sub-button-1 {
background: grey !important;
}

replace 'grey' with any color name or rgba you want to set.
I recommend working with Claude AI for help with styling.

[antoinebreban]

Thanks,
I meant the background color of the "sub-button" card not the bg color of a sub-button item, don't know if I'm clear
type: custom:bubble-card
card_type: sub-buttons

In the example my issue is to set a color to the background, not the sub-button which are already yellow (and grey for the 1st)

If there is a method more convenient than .bubble-something in styles section I am open to this too

[MadMan-Y]

Oh sorry I miss understood your request.
My module doesn't support card container styling but you can try this in the styles section:
ha-card {
background: rgba(0, 0, 0, 0.3) !important;
}

You can replace the rgba with a color name or just set the rgba for your desired color. Last number inside the brackets is for transparency. Good luck!

[antoinebreban]

I already tried this but it looks like Bubble card is adding a layer over the ha-card original bg (see corners of cards which are affected by your suggested command)

[antoinebreban]

I fixed this with "hide_main_background: true" and changing bg color with card mod

[DerHerzog7]

This is cool. Does it include animated icons?

[MadMan-Y]

Thanks!
It does not include animated icons. There is an existing module for that in the store.
My goals were to simplify styling conditional icons and icon & bg colors for sub buttons, and to automate the process for light and climate entities, which were not addressed by any existing module I could find.

[DerHerzog7]

Ah nice. Ok! Thanks!

[MadMan-Y]

Update: Version 1.2 🚀

What's New:

• UI Improvements: Entity type selection for treat-as function (instead of separated toggles), organized sections, 3 icon modes (Condition-based, HVAC, On/Off)
• Performance: ~85% faster with less system resource usage through optimized module code structure
• Auto Icon Styling Features: HVAC icons for climate entities, lightbulb-off for lights
• More Control: Disable auto-detection toggle per button
• Backward Compatible: Old configs (v1,0 and v1.1) work automatically

Supports up to 20 buttons per card. Enjoy! 🎉