This has been a long time, and because I never really had use for colorizing the state, I guess I never noticed.
But, now that I do want it to be correct, let me please post this:
- type: entities
entities:
- type: custom:template-entity-row
entity: sensor.studenten_hygro_temp_battery
state: >
{{states(config.entity,with_unit=True)}}
secondary: >
Battery type: {{states(config.entity ~'_type')}}
card_mod: &perc
style: |
div#wrapper:
.: |
.state {
color: magenta;
}
.info {
color: cyan;
border: 2px solid var(--ha-color);
background:
{% set perc = states(config.entity)|float(0) %}
{% set rest = 100 - perc %}
{% if perc <= 10 %} {% set bar = '255,0,0' %}
{% elif perc <= 20 %} {% set bar = '128,0,0' %}
{% elif perc <= 30 %} {% set bar = '255,140,0' %}
{% elif perc <= 40 %} {% set bar = '255,165,0' %}
{% elif perc <= 50 %} {% set bar = '255,255,0' %}
{% elif perc <= 60 %} {% set bar = '154,205,5' %}
{% elif perc <= 70 %} {% set bar = '144,238,144' %}
{% elif perc <= 80 %} {% set bar = '50,205,50' %}
{% elif perc <= 90 %} {% set bar = '0,128,0' %}
{% else %} {% set bar = '0,100,0' %}
{% endif %}
/*linear-gradient(to left,ivory {{rest}}%, {{bar}} {{perc}}%);*/
linear-gradient(to right, rgb({{bar}},0.9) 0%, rgb({{bar}},0.6) {{perc}}%,
rgba({{bar}},0.3){{perc}}%, rgba({{bar}},0.1) 100%);
}
.info .secondary {
color: white;
}
:host {
--card-mod-icon-color:
{% set perc = states(config.entity)|float(0) %}
{% if perc <= 10 %} red
{% elif perc <= 20 %} darkred
{% elif perc <= 30 %} darkorange
{% elif perc <= 40 %} orange
{% elif perc <= 50 %} yellow
{% elif perc <= 60 %} yellowgreen
{% elif perc <= 70 %} lightgreen
{% elif perc <= 80 %} limegreen
{% elif perc <= 90 %} green
{% else %} darkgreen
{% endif %};
}
I am planning to add this to an auto-entities, and noticed the card doesnt really like it, because the colors are not applied correctly in that case, especially the background (which is the whole idea of this card in the first place)
so, 2 challenges, color the state, and feed it in auto-entities.
Please have a look if my
.state {
color: magenta;
}
is still the correct way.
btw, I first tried it without explicit state template, because the template-entity-row takes that off of the config.entity, but when it didnt colorize, I figured to add it explicitly. No change though
current state in auto-entities:
