Sub Button Icon State Color

[StaleLoafOfBread]

Today we can color the background when the entity is considered on. This makes it a gold/yellow (at least on my theme). I am suggesting a feature where instead it will:

1. color the icon itself, not the background
2. make the color match var(--state-icon-color) for that sub buttons entity

For my purposes, a singular toggle for Use state color for icon would be perfect.

I have tried to accomplish this via style to color my phone battery icon but instead it's coloring based on the main person entity. I am not well versed in CSS nor JS so it's perhaps possible this way and I just do not yet know it.

type: custom:bubble-card
card_type: button
button_type: state
show_attribute: false
sub_button:
  - entity: sensor.phone_battery_level
    show_background: false
    show_attribute: false
    show_state: true
show_state: false
styles: |-

  .bubble-sub-button-1 {
      color: var(--state-icon-color) !important;
  }
entity: person.me

This is effectively the State color feature of the headings card under appearance for it's entities.

type: heading
icon: ""
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.phone_battery_level
    color: state

Now that I'm comparing the two, I think copying the appearance functionality in whole would be awesome as that adds icon customization and the ability to show multiple attributes, including the state.

[MrBearPresident]

Paste following in your custom style:

  :host{
      --color-ok-icon: green ;
      --color-warning-icon: orange ;
      --color-alert-icon: red ;
  }

  .bubble-sub-button-01 ha-icon {
    color: var(${ hass.states['sensor.phone_battery_level'].state > 40 ? '--color-ok-icon':
                  hass.states['sensor.phone_battery_level'].state> 20 ? '--color-warning-icon' :
                              '--color-alert-icon'}) 
              !important; }

---

If this solves your question, mark it as solved and close the discussion.

[StaleLoafOfBread]

Just to clarify for my own curiosity, does that mean that tile card and entities card are not technically using the same logic to determine the color? Like sure, they do end up using the same colors for the same values but they aren't importing the same config? Rather two separate configs which by design are the same but technically it's two files which could differ (not that that would be desirable but technically could happen due to human error)

[MrBearPresident]

I think the entities card is only blue because you need to add state_color: true.

You are correct.

does that mean that tile card and entities card are not technically using the same logic

As far as I can find they use the same compute logic. Because both are in the same project in the same .js file they can share code.

Thank you very much for looking into this and your work overall on bubble card! I've seen you quite a bit on here and have used some of your examples.

Yeay for the examples usage. That is what they are for.
And I'm happy to help Cloos somewhat.

[MrBearPresident]

Could you also mark something as a solution? This is easier for other users.

[StaleLoafOfBread]

Thank you @MrBearPresident for all your help! By editing your solution I was able to create exactly what I wanted (though would be preferable if state colors were built in and matched Home Assistant's built in cards exactly so I'll make FR as you suggested).

Turns out I can use the CSS vars from home assistant's implantation and copy their thresholds!

Below I used your logic and copied the CSS vars and thresholds from the native cards as shown in the file you found. https://github.com/home-assistant/frontend/blob/3fd3c8003a0a1deb18d8959f94ca2dc7b1bfb63d/src/common/entity/color/battery_color.ts

  .bubble-sub-button-1 {
    color: var(${ hass.states['sensor.phone_battery_level'].state >= 70 ? '--state-sensor-battery-high-color':
                  hass.states['sensor.phone_battery_level'].state >= 30 ? '--state-sensor-battery-medium-color' :
                              '--state-sensor-battery-low-color'}) 
              !important; }

Apologies for any formatting issues, on mobile.