sub-button styles

[nagualul]

Goal

Hi!

First, thanks for your amazing work on Bubble Card – it has quickly become one of my favorite custom cards for Home Assistant!

I have a feature question regarding the sub_button functionality. I would like to dynamically change the color of a sub_button (for example, the icon or the background) based on the state of the sub_button’s entity itself, not based on the main card entity.

Example use case:

My main card is a climate entity (climate.boschcom_rac_101312146_clima).

I have a sub_button that displays the current temperature as a sensor (sensor.clima_temperatura_curenta).

I want the sub_button’s icon (or background) to turn red if the temperature is above 27°C, orange between 24–27°C, and blue below 24°C.

I tried using the following styles code under the sub_button:
styles: |-
.bubble-sub-button-icon[data-entity="sensor.clima_temperatura_curenta"] {
color: ${
(Number(states['sensor.clima_temperatura_curenta'].state) > 27)
? '#e53935'
: (Number(states['sensor.clima_temperatura_curenta'].state) > 24)
? '#ff9800'
: '#1565c0'
};
}
Unfortunately, this does not seem to work—the icon color does not update dynamically according to the sensor state.

I also tried several other approaches (using both state and states['sensor.clima_temperatura_curenta'].state), but none of them appear to provide access to the sub_button’s entity state within the JS template context.

My question:
Is there currently any way (or planned future support) for referencing the sub_button’s own state in the styles section, so I can apply dynamic colors or styles depending on its value?
If not, would you consider adding this as a feature in a future version?
This would unlock a lot of visual and UX potential for more advanced dashboards (e.g., battery level, temperature, or custom warnings).

Thank you in advance for your help and for your great work on Bubble Card!
Let me know if you need a minimal config example or further details.

Best regards,
Adrian

Source Yaml

type: custom:bubble-card
card_type: climate
entity: climate.boschcom_rac_101312146_clima
name: Climă
hide_target_temp_low: true
hide_target_temp_high: true
card_layout: normal
state_color: true
show_state: true
sub_button:
  - name: HVAC modes menu
    select_attribute: hvac_modes
    show_arrow: true
    state_background: true
  - entity: sensor.clima_temperatura_curenta
    name: Temperatura curentă
    show_icon: true
    show_state: true
    icon: mdi:thermometer
    styles: |-
      .bubble-sub-button-icon[data-entity="sensor.clima_temperatura_curenta"] {
        color: ${
          (Number(states['sensor.clima_temperatura_curenta'].state) > 27)
            ? '#e53935'
            : (Number(states['sensor.clima_temperatura_curenta'].state) > 24)
              ? '#ff9800'
              : '#1565c0'
        };
      }

Which step did you already try?

No response

Problem

No response

Read the documentation

• I have read the documentation