I want to customize the thermostat card in my Home Assistant dashboard to meet the following requirements:
i need Change the color of the arc:
The arc should dynamically change its color based on the mode of the thermostat or the temperature. For example:
Blue for cooling mode.
Red for heating mode.
A neutral color like gray for idle or off mode.
Dynamic color based on temperature:
the arc or text should reflect the current temperature. For example:
Below 20°C: Blue.
Between 20°C and 23°C: Orange.
Above 23°C: Red.
Im using Better Thermostat UI Card
ive tried a lot times change the code but all the time im faild
type: custom:better-thermostat-ui-card
entity: climate.andar_de_cima
name: Melhor Termostato
show_current_temperature: true
show_humidity: true
card_mod:
style: |
ha-card {
--primary-color:
{% set temp = states['climate.andar_de_cima'].attributes.current_temperature | float %}
{% if temp <= 20 %}
#4287f5; /* Azul */
{% elif temp > 20 and temp <= 23 %}
#f5a142; /* Laranja */
{% else %}
#f54242; /* Vermelho */
{% endif %};
}
.ha-control-circular-slider {
--primary-color:
{% set temp = states['climate.andar_de_cima'].attributes.current_temperature | float %}
{% if temp <= 20 %}
#4287f5; /* Azul */
{% elif temp > 20 and temp <= 23 %}
#f5a142; /* Laranja */
{% else %}
#f54242; /* Vermelho */
{% endif %};
}
.slider-value {
color:
{% set temp = states['climate.andar_de_cima'].attributes.current_temperature | float %}
{% if temp <= 20 %}
#4287f5; /* Azul */
{% elif temp > 20 and temp <= 23 %}
#f5a142; /* Laranja */
{% else %}
#f54242; /* Vermelho */
{% endif %};
}