Need Community Help - Set Sub Button Icon and/or Background Color Based on Conditions

[Schocker360]

Goal

Hi Community,

I have been trying to debug this code all evening and for the life of me I can't figure out what is wrong. My goal here is to create a new module that sets a sub button's icon and/or background color based on if a condition is met or not. Any help anyone can provide would be greatly appreciated. Once I publish the module, I will be sure to give credit to whoever can help me debug this thing :smile

Source Yaml

sub_button_conditional_colors:
  name: Sub-button Conditional Coloring
  version: '1.0'
  creator: Schocker360
  supported:
    - button
  description: |
    Change sub-button icon and background colors based on conditions.
    Set defaults that apply when no conditions are met.
  code: |
    ${(() => {
      const config = this.config.sub_button_conditional_colors || {};
      const defaults = {
        icon_color: config.default_icon_color || 'var(--primary-text-color)',
        background_color: config.default_background_color || 'transparent'
      };

      for (let i = 1; i <= 25; i++) {
        const buttonConfig = config[`button_${i}`];
        if (!buttonConfig) continue;
        
        const buttonEl = card.querySelector(`.bubble-sub-button-${i}`);
        const iconEl = buttonEl?.querySelector('ha-icon');
        
        // Start with defaults
        let iconColor = defaults.icon_color;
        let bgColor = defaults.background_color;

        // Check conditions in priority order
        for (const conditionSet of buttonConfig.conditions || []) {
          if (checkConditionsMet(conditionSet.conditions || [], hass)) {
            iconColor = conditionSet.icon_color || iconColor;
            bgColor = conditionSet.background_color || bgColor;
            break; // Use first matching condition
          }
        }

        // Apply colors
        if (buttonEl) {
          buttonEl.style.backgroundColor = bgColor;
          buttonEl.style.setProperty('--icon-color', iconColor, 'important');
        }
        if (iconEl) {
          iconEl.style.color = iconColor;
          iconEl.style.setProperty('color', iconColor, 'important');
        }
      }
    })()}
  editor:
    - type: expandable
      title: Default Colors
      name: default_colors
      schema:
        - name: default_icon_color
          label: Default Icon Color (hex or HA variable)
          selector:
            text: {}
        - name: default_background_color
          label: Default Background Color (hex or HA variable)
          selector:
            text: {}
    - type: expandable
      title: Sub-button 1
      name: button_1
      schema:
        - name: conditions
          label: When these conditions are met
          selector:
            condition: {}
        - name: icon_color
          label: Icon Color (hex or HA variable)
          selector:
            text: {}
        - name: background_color
          label: Background Color (hex or HA variable)
          selector:
            text: {}
    - type: expandable
      title: Sub-button 2
      name: button_2
      schema:
        - name: conditions
          label: When these conditions are met
          selector:
            condition: {}
        - name: icon_color
          label: Icon Color (hex or HA variable)
          selector:
            text: {}
        - name: background_color
          label: Background Color (hex or HA variable)
          selector:
            text: {}
    - type: expandable
      title: Sub-button 3
      name: button_3
      schema:
        - name: conditions
          label: When these conditions are met
          selector:
            condition: {}
        - name: icon_color
          label: Icon Color (hex or HA variable)
          selector:
            text: {}
        - name: background_color
          label: Background Color (hex or HA variable)
          selector:
            text: {}
    - type: expandable
      title: Sub-button 4
      name: button_4
      schema:
        - name: conditions
          label: When these conditions are met
          selector:
            condition: {}
        - name: icon_color
          label: Icon Color (hex or HA variable)
          selector:
            text: {}
        - name: background_color
          label: Background Color (hex or HA variable)
          selector:
            text: {}

Which step did you already try?

I have basically been using trial and error on several lines of code.  My challenge is two fold:

1. I have never written javascript before so I'm learning as I go
2. I am not sure how to debug this in the console

Problem

The problem I'm encountering is the default colors are not being applied to the button and when a condition is met, the icon is not changing to the new color

Read the documentation

• I have read the documentation

[Schocker360]

When I searched yesterday, I didn't see HenryJIII's post. Today, I extended their code slightly and I was able to get it to work. Go here for the answer: #1311 (reply in thread)