I have my UPS’ on NUT shown as badges. I want to only see the icon in color if it is charging or discharging. if it’s just sitting there at 100% I want the icon color disabled, not state, which is green. I want the icon to match the charge level, and show charging if it is charging, but I’m assuming if I dont manually set an icon, the battery icon will change itself to match charge status and level, just not color.
I keep finding uglier and uglier ways to do this and I’ve decided I’m just overthinking this. how are you guys doing this?
Take a look at UIX icon styling. You can style either locally to a badge config or use --uix-icon-for-<entity_id> and --uix-icon-color-for-<entity_id> in your theme. If going the theme route then do something similar to Full theme example.If uses templates for color, but you could also template the actual icon if the UPS entity does not have battery device class.
Is there a way to tell HA to se state color to none under certain conditions for all NUT battery level entities rather than doing this badge by badge? What actually decides what the default icons and colors are?
Yes. The feature does what you need. You can call the template in a loop to handle all entities in an area for example. Or perhaps use a label. Start with one entity and get that right, then bring in your entities calling the macro in a loop.
Once you take a read of the docs then if you need assistance come back and ask.
so it looks like a different approach to what card-mod tries to do thats more maintainable and actively developed and people are migrating to that. okay.
It looks like I cant have this override how the NUT integration describes its entities to homeassistant, but I can create a sort of stylistic template called a forge that I can call on in any UI element I want to apply it to, rather than copy pasting the same stylistic tweaks on a per-entity basis.
Not quite, while you could use a Foundry for your badges to centralise styling in one place, it is not neccessary to do this way.
Did you read the Icon styling documentation? For any entity you can set special UIX CSS vars --uix-icon-for-<entity_id> and --uix-icon-color-for-<entity_id> in theme at root level. These vars can also take templates.
e.g. if your sensor is sensor.nut_server_rack you would set the CSS var --uix-icon-color-for-sensor_nut_server_rack to what color you want based on a template result. e.g. A simple template (not knowing exactly what NUT sensors return) --uix-icon-color-for-sensor_nut_server_rack: {{ 'red' if is_state('sensor.nut_server_rack', 'charging') else 'var(--state-inactive-color)' }}. You put this is your uix-root theme and perhaps also uix-more-info and a few other theme sections is you want to see in edit more, and then whenever this sensor shows, its icon color will be per your template. The rest is just macro and templating so you can do this for a bunch of entities, to in the end, generate a --uix-icon-color-for... for each entity.
You can look at a real life example from @Mariusthvdb where he styles icon colors for temperatures.