A custom Home Assistant Lovelace card that displays temperature sensors as colored bars. Each bar fills based on the current temperature and changes color through a gradient — blue for cold, green for comfortable, red for hot — so you can see the state of every room at a glance.
type: custom:temperature-bar-card
entities:
- sensor.bonus_room_temperature
- sensor.bedroom_temperature
- sensor.outside_south_temperature
That's it. The card uses sensible Fahrenheit defaults. For Celsius, add unit: celsius.
| Guide | What's inside |
|---|---|
| Installation | HACS setup, manual install, adding to dashboards, updating |
| Configuration | All options, entity formats, unit system, color & threshold system |
| Examples | Copy-paste YAML configs for common setups |
| Troubleshooting | Common problems and how to fix them |
- Automatic color coding — bars change color from cold (blue) to hot (red) based on temperature
- Fahrenheit & Celsius — set
unit: celsiusand defaults adjust automatically - Auto-conversion — sensors reporting in a different unit are converted on the fly
- Customizable thresholds & colors — define your own breakpoints and color palette
- Optional icons — show MDI icons next to entity names
- Compact & responsive — works on desktop and mobile dashboards
| Option | Default | Description |
|---|---|---|
entities |
required | List of sensor.* entity IDs or {entity, name} objects |
title |
"" |
Card title |
unit |
"fahrenheit" |
"fahrenheit" or "celsius" |
min_temp / max_temp |
auto | Bar width range (auto-set per unit) |
temperature_thresholds |
auto | Descending breakpoints for color buckets |
temperature_colors |
auto | One more color than thresholds |
icon |
"mdi:thermometer" |
MDI icon name |
show_icon |
true |
Show/hide icons |
text_color |
"rgba(255,255,255,0.9)" |
CSS color for bar text |
See Configuration for full details.
Contributions are welcome! Please open an issue or pull request on GitHub.
This project is licensed under the MIT License — see the LICENSE file for details.