Thermostat change color

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 %};
    }

Simon42 released a Video in YouTube only Yesterday regarding this issue.

Regards
Michael

You can try these codes, hope this helps. I use these in my card mod.

bt-ha-control-circular-slider {
  --primary-color: #ff8100 !important;
}
#bar {
  stroke: #2b9af978 !important;            
}
#shadowpath {
  stroke: rgb(195 195 198) !important;
}
#value {
  fill: #ff8100 !important;
}
#modes ha-icon-button.selected-icon, #modes .selected-icon {
  {% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
    color: #ff8100;
  {% else %}
    color: var(--disabled-text-color);
  {% endif %} 
}  

1 Like

Thanks, bro

Could you add the link please?
Thank you