State-label change color value from entity states?

Configuration Frontend
1

hi guys, is it possible to change state-label color based from some hex code color i templated before?

im planning to use it at my house plan.

currently i used:

   - type: state-label
     entity: climate.master_bedroom_1pk
     attribute: current_temperature
     suffix: °C
     style:
       top: 40%
       left: 82%
       '-webkit-text-stroke': 1px green

Screenshot 2021-09-23 103310
Screenshot 2021-09-23 103310427×610 26.2 KB

here’s my template code:

 sensor:
   - platform: template
     sensors:
       mb1pkcolor:
         friendly_name: master bedroom 1 PK color
         value_template: >
           {% set min = 18 | float %}
           {% set max = 35 | float %}
           {% set a = state_attr('climate.master_bedroom_1pk', 'current_temperature') | float %}
           {% set b = (max - min) %}
           {% set c = (a - min) %}
           {% set red = ((c * 100) / b) | round(0) %}
           {% set redhexdecimal = (red * 255 / 100) | round(0) %}
           {% set redhex = '%0x' % redhexdecimal %}
           {% set green = (100 - ((c * 100) / b)) | round(0) %}
           {% set greenhexdecimal = (green * 255 / 100) | round(0) %}
           {% set greenhex = '%0x' % greenhexdecimal %}
           {% if a > max %}
             red
           {% elif a < min %}
             green
           {% else %}
             '#{{ redhex }}{{ greenhex }}00'
           {% endif %}

and heres the entity value at developers tools

Screenshot 2021-09-23 105203
Screenshot 2021-09-23 105203982×681 66.5 KB

i’ve tried to change
‘-webkit-text-stroke’: 1px green
into
‘-webkit-text-stroke’: {{ states.sensor.mb1pkcolor.state }}
but it doesn’t work

any suggestion?
thanks in advance!

2

Hi, it should be possible with card_mod:

See the section ‘Templates’…

In your case something like this can work:

   - type: state-label
     entity: climate.master_bedroom_1pk
     attribute: current_temperature
     suffix: °C
     card_mod:
       style: |
         :host {
           top: 40%;
           left: 82%;
           color: {{ states.sensor.mb1pkcolor.state }};
         }

Please notice, that I used css attribute ‘color’ not ‘-webkit-text-stroke’. For some reason, only ‘color’ worked in my attempts. Sometimes you have to try around a little with card-mod and try different things until it works, but in principle it should work with it.

3

it works like charm!
several things to note, need to remove the apostrophe between the hex code or it wont works.
thanks mate!