Hi there!
The 7°C here is the target temperature of a radiator. I’d like to display it in red or orange when set to 21°C and blue when it’s 7°C
Is that even possible with the heading card?
I tried this but it doesn’t work:
EDIT: For future reference, it seems impossible without custom components but it’s possible to dynamically change the icon with a template sensor:
why would you believe that to work?
if you found some hidden document stating it does, please share 
for now, you can only colorize the icons with the state-colors known in the theme
I’m a beginner in Home Assistant, I have no idea what is or isn’t standard, I was hoping that “state color” would came with a way of stating the color 
I’ve never modified the theme. Could I use that, then? Define blue for colors under 15°C and orange above or something like that.
Otherwise, I’d be happy if I could change the icon depending on the temperature. I assume the heading card doesn’t allow that but maybe I could template a sensor that has an icon defined by its state??
(Again: I’m a beginner, and an idiot, I have no idea if that’s possible)
No problem , welcome to the club
Start by reading the documentation on device_class
Entities using a device_class will change their color and icon according to their ‘state’
They use the state-colors for that. And are set by de default theme or by the user in customized themes
For numeric sensors, only a “battery” device_class has supported coloring & thus partucular colors (but not thresholds) can be defined in a theme.
Means - coloring for other numeric sensors should be done by other ways like card-mod/custom-ui.
Thank you.
What do you think about my idea of changing the icon? Could a template sensor do that?
It has no support for changing a color.
As I said - card-mod or custom-ui.
An icon itself (not color) may be dynamically changed in template sensors.
That’s what I was hoping
Not sure custom-ui supports the colors in the Header card (havent tested it myself yet, I dont use the header badges because they are invisible in a dark theme…)
It will probably customize icons, because icons are supported on the entity in core HA. But template entities also support icon templates in core.
If it doesnt customize the icon_color, it probably wont in the future and Ive written this about its future and hope to phase it out.
Unless someone will provide working PR’s, thats about it for custom-ui.
Our hopes should be on core state-colors first, and if not, card_mod…
UPDATE
Well, as it stands, Custom-ui seems to be broken in HA 2024.10 even, so no luck there at all I am afraid.
I’d welcome and appreciate a fix (wee did that before and mostly is was simpler than anticipated, so not al all impossible), but for now the end has come sooner than I expected…
It wasn’t broken, probably a temporary hiccup
As I said, only “battery” class supports colors. Probably some other classes should have color support as well. As for temperatures: consider “sensor.indoor_temperature” & “sensor.cpu_temperature” - both may have “device_class: temperature” but different levels for “cool” & “hot”.
Alright, so I did that. I share the yaml of my template in case someone wants to use it in the future:
#Target temperatures radiateurs
- sensor:
- name: "Target temp bedroom radiator"
unique_id: bedroom_radiateur_target_temperature
device_class: temperature
state_class: measurement
unit_of_measurement: "°C"
state: "{{ state_attr('climate.radiateur_bedroom', 'temperature') | float }}"
icon: >
{% if (state_attr('climate.radiateur_bedroom', 'temperature') | float) < 14 %}
mdi:snowflake
{% elif (state_attr('climate.radiateur_bedroom', 'temperature') | float) == 21 %}
mdi:fire
{% else %}
mdi:thermometer-alert
{% endif %}
I wish I could declare a color (with if statements) for a template sensor, though
it’s a bit odd you mark your own post as solution to the ask you had,
about state color and temperature, while your simple and regular template sensor only sets an icon…
you really should check out all the available state-colors which is a lot more than just battery-colors.
it doesnt fix your particular request, but my test headers are rather colorful using the many available domains and colors set in the theme, default or custom
It seems impossible to color heading badges, so I marked the next best thing as a solution.
Would it be better not to mark the topic as solved?
It was explained you how to do it.
And fwiw: I’ve tested some custom-ui versions (non breaking) and they do Not colorize the Header entity badges.
the entity picker see the customized icon_color:
but the Header shows an icon without color
maybe we should try to PR the resource after all and make it support the new Heading
“card-mod or custom-ui” is not much of an explanation but you’re right, it’s a solution. I’m not implementing it because I try to limit custom components as much as I can but I’ll keep it in mind
@Mariusthvdb
Try making something similar to “installStateBadgeStylingHook” but for “ha-heading-badge” instead of “state-badge”:
Entities card, color set but Custom UI:
Heading card, element is not affected by Custom UI:
yes, I’ve experimented there locally…
thing is, I don’t think I should pursue because I really want to phase out custom-ui.
If newcomers install it, and start modding there heading badges, and we need to support all that, the end is not in sight…
My hopes are up for card-mod, and some adaptation there, if builtin state-classes don’t suffice.
what do you think?
I think you should not give up. Some cases are not covered by card-mod like showing a colored icon in more-info.
I am also exploring this possibility. Currently, I can only alter the color of the icons, but not according to their state.
