Theming icon color of state-badge of more info

[dcapslock]

Moved from #510 @Mariusthvdb

btw, talking UIX styling in more-info coming from a themed entity...
what would be very very nice, if when clicking an entity, like here Zolder (attic), styled with my indoor temp template

style: |
  :host {
    --icon-primary-color:
      {% set state = states(config.entity)|int(-5) %}
      {% if state == 'unknown'%} gray
      {% elif state < 5 %} dodgerblue
      {% elif state < 10 %} lightblue
      {% elif state < 15 %} turquoise
      {% elif state < 20 %} green
      {% elif state < 25 %} darkgreen
      {% elif state < 30 %} orange
      {% elif state < 35 %} crimson
      {% else %} firebrick
      {% endif %};
  }

( I know, over the top, but lets not go there now)

its more info would also apply that....

that is what my ancient custom-ui does, (well, it sets an actual attribute icon_color to the entity, and applies that everywhere the entity lives, including the more-info), and it is the last thing I miss in styling our Dahsboards.

@dcapslock if that would be something you could think to be possible, Id gladly open a FR for that.

and forgive the toggle. haha

[dcapslock]

This is already possible. See example below. You would adjust the if to perhaps a regex test against the temp sensors you wish to template. config is available in more-info and will contain entityId of the more-info entity.

  uix-more-info-yaml: |
    ha-more-info-info $$ state-info $: |
      state-badge {
        {% set entity = config.entityId if 'entityId' in config else None %}
        {% if entity == 'sensor.sydney_olympic_park_temp' %}
          --icon-primary-color:
          {% set state = states(entity)|int(-5) %}
          {% if state == 'unknown'%} gray
          {% elif state < 5 %} dodgerblue
          {% elif state < 10 %} lightblue
          {% elif state < 15 %} turquoise
          {% elif state < 20 %} green
          {% elif state < 25 %} darkgreen
          {% elif state < 30 %} orange
          {% elif state < 35 %} crimson
          {% else %} firebrick
          {% endif %};
        {% endif %}
      }

[Mariusthvdb]

yeah that is of course possible, but the point would be to prevent requiring this, as it would effectively double the uix yaml in our configs for all....
hence maybe for an individual styling this would be ok, but not as a generic option: make entities inherit the dashboard styling in their more-info dialog

[dcapslock]

hence maybe for an individual styling this would be ok,

You can make it quite generic but would need a list of entities to style and then make your if match on that list or some other neat template. As you say, not ideal, hence the alternative answer on new FR on icon styling.

make entities inherit the dashboard styling in their more-info dialog

Pretty much impossible as there is no link from dialog to what called it, except for the captured event composed path, but even then matching an icon styling from any card type, to what is needed for that specific icon would be a headache, hence the alternative answer on new FR on icon styling.

[dcapslock]

Another possible FR would be to implement --uix-icon-for-<entity_id> and --uix-icon-color-for-<entity_id> which would work same as for styling entity images. Tihs would just be an addition to the --uix-icon procesisng so no extra overhead as calls to getComputedStyle is already optimised, and code for icon and color is there, just an additoinal step to check for --uix-icon-for-<entity_id> and --uix-icon-color-for-<entity_id>, and agree which takes precedence (--uix-icon-for-<entity_id> vs --uix-icon and --uix-icon-color-for-<entity_id> vs --uix-icon-color). To match what entity picture does, the non-entity form would take precedence.

[dcapslock]

Could probably reduce by one line, but proof of concept.

[dcapslock]

imagine being able to do away with this... (temp_binnen_color = temp_inside_color) and have that as an include now obviously, which already save a huge amount of repetition, but still very verbose, setting it to each representation of the same entity

You get this down to a few macros and then including your equivalent to my temp_colors_sydney()

[dcapslock]

BTW, the code changes pretty easy, will work on doco and tests tomorrow. This will be included in 8.1.0 beta that will be released after 8.0.1 which I am leaving until Thu night ready for the next 2026.8 point release so hoping that users can update UIX as they update HA and make updates a bit less of a hassle.

[dcapslock]

Available in 8.1.0-beta.1