Theming the HA2024.1 Thermostat Card

In the old version of the thermostat card (prior to HA2023.12), it was easy to theme the colours to show differently if the room was in passive mode. This becase somewhat harder with the new version but below is a card_mod extract to do just that. There are a number of variables that can be set at the top, an only these need modifying to change the theming, as explained below:

Colours

• --climate-auto-color - the color of the slider and HVAC auto button in normal climate auto mode
• --climate-heat-color - the color of the slider and HVAC heat button in normal climate heat mode
• --passive-auto-color - the color of the slider and HVAC auto button in passive climate auto mode
• --passive-heat-color - the color of the slider and HVAC heat button in passive climate heat mode
• --is-heating-color - the colour of the glow on the thermostat when the room is heating
• --show-demand-highlight - the colour of the labels if demand is > 0% when not heating

Buttons & Text

• --button-visibility - when to hide or show the buttons. To show, set this to visible
• --passive-mode-text - extra text you can add after the temp range label when in passive mode. This can be fixed text ie Passive Mode or a template value of an attribute as in the code below.
• --passive-mode-text-color - the color of the extra text (--action-color will keep same as glow)

card_mod:
  style:
    ha-state-control-climate-temperature:
      .: |
        :host {
          {# Colors #}
          --climate-auto-color: var(--green-color);
          --climate-heat-color: var(--deep-orange-color);
          --passive-auto-color: var(--light-green-color);
          --passive-heat-color: var(--amber-color);
          --is-heating-color: var(--deep-orange-color);
          --show-demand-highlight: var(--state-climate-heat-color, inherit);

          {# Buttons and extra text #}
          --button-visibility: hidden;
          --passive-mode-text: "Passive Setpoint - {{ state_attr(config.entity,'displayed_setpoint')}}C";
          --passive-mode-text-color: var(--action-color);

          {# DO NOT MODIFY BELOW HERE #}
          --state-climate-heat-color: var(--climate-heat-color, --deep-orange-color);
          --state-climate-auto-color: var(--climate-auto-color, --green-color);
        }
      $:
        .: |
          {# Set radial glow color when heating #}
          {% if state_attr(config.entity, 'is_heating') %}
            div.container.lg {
              --action-color: var(--is-heating-color) !important;
            }
          {% endif %}

          {# Hide +/- buttons #}
          .buttons { visibility: var(--button-visibility); } 

          {# Highlight text if demand above 0 when not heating #}
          {%- if state_attr(config.entity,'percentage_demand') | float(0) > 0 %}
            .label { color: var(--show-demand-highlight) !important; }
          {%- endif -%}

          {# Add additional text after temp label #}
          {%- if state_attr(config.entity, 'is_passive') %}
            .info > p:last-of-type::after { content: "\a" var(--passive-mode-text); white-space: pre; color: var(--passive-mode-text-color)}
          {% endif %}
        ha-control-circular-slider:
          $: |
            {# Set slider colours #}
            {%- if state_attr(config.entity, 'is_passive') %}
              .high {
                  stroke: var(--disabled-color) !important;
              }
              {% if is_state(config.entity, 'auto') -%}
                .background, .low {
                  stroke: var(--passive-auto-color) !important;
                  opacity: 0.75 !important; 
                }
                .low {
                  opacity: 0.50 !important; 
                }
              {% elif is_state(config.entity, 'heat') -%}
                .background, .low {
                  stroke: var(--passive-heat-color) !important;
                  opacity: 0.75 !important; 
                }
                .low {
                  opacity: 0.50 !important; 
                }
              {% endif %}
            {% endif %}
    hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select:
      $: |
        {# Set HVAC mode button colors #}
        {%- if state_attr(config.entity, 'is_passive') %}
          #option-auto::before {
            background-color: var(--passive-auto-color)
          }
          #option-heat::before {
            background-color: var(--passive-heat-color)
          }
        {% endif %}