Customizing Temperature Sensor Colors in Home Assistant

General
1

Hi everyone! I’ve been working on customizing the colors of my temperature sensors in Home Assistant, and I wanted to share my journey and solution with you.

The Challenge

I wanted to color both the icon and the value of my temperature sensors based on different temperature ranges, while keeping the name in its standard color. Initially, I struggled with the fact that changing the color for the icon also affected the value and name. After some research and experimentation, I found a way to achieve the desired effect.

My Solution

Here’s the code I ended up using:

yaml

  • entity: sensor.aussenmodul_temperature
    name: Temperatur
    icon: mdi:temperature-celsius
    card_mod:
    style: |
    :host {
    –card-mod-icon-color: {% if states.sensor.aussenmodul_temperature.state | int <= 3.0 %} deepskyblue
    {% elif states.sensor.aussenmodul_temperature.state | int <= 12.0 %} darkcyan
    {% elif states.sensor.aussenmodul_temperature.state | int <= 20.0 %} olivedrab
    {% elif states.sensor.aussenmodul_temperature.state | int <= 25.0 %} goldenrod
    {% elif states.sensor.aussenmodul_temperature.state | int <= 30.0 %} peru
    {% elif states.sensor.aussenmodul_temperature.state | int > 30.0 %} coral
    {% endif %};
    }
    .value {
    color: {% if states.sensor.aussenmodul_temperature.state | int <= 3.0 %} deepskyblue
    {% elif states.sensor.aussenmodul_temperature.state | int <= 12.0 %} darkcyan
    {% elif states.sensor.aussenmodul_temperature.state | int <= 20.0 %} olivedrab
    {% elif states.sensor.aussenmodul_temperature.state | int <= 25.0 %} goldenrod
    {% elif states.sensor.aussenmodul_temperature.state | int <= 30.0 %} peru
    {% elif states.sensor.aussenmodul_temperature.state | int > 30.0 %} coral
    {% endif %};
    }

Explanation

  • Icon Color: The --card-mod-icon-color variable is used to set the icon color based on the temperature range.
  • Value Color: The .value class is targeted to set the color of the temperature value independently.
  • Name Color: The name remains in its default color as it’s not explicitly targeted in the style.

Outcome

This setup allows me to have a visually consistent and informative dashboard where the icon and value colors change based on temperature, while the name stays consistent. It’s been a great way to quickly assess the temperature at a glance!

I hope this helps someone else looking to customize their temperature sensors in Home Assistant. Happy automating! :rocket: