I’m not sure what your trying to do. Themes typically allow you to set the colors for the entire UI. Examples can be found in themes category in the Hacs add-on. But there are no ‘on:’/‘off:’ keys in those files. Perhaps you are trying to add styling as per the card-mod plug-in? In that case mods are added to the lovelace yaml files. Card-mod is also available through the Hacs add-on.
My initial wish is to colorize my badges (at the top of the pages), like I’ve put some binary sensors (ping) and want them red or green depending on the binary_sensor state.
For that, I’m using something found in this thread Custom UI - icon color change
Looked into the reference documentation you sited. Most references are pretty old and the last update to the andrey-git seems to be about a year old. What version of ha are you using? Are you using Lovelace for your ui? Are you using the andrey-git Custom UI code? None of what you’re proposing to do will work without it as far as I can see.
I will. But it is not a badge at the side of an entity, inside a card but the one on top of a page. I’ll have a look to see what is possible with Card-mod.
Then I assume you are using the auto Lovelace ui and not yaml mode. In that case you might look at the hacs themes. There is some amount of customization of the badge colors in them. Perhaps you can determine more of the badge color labels and change it that way. There’s discussions in the card-mod thread about how to find specific color labels that will help.
Long story short, I was using the yaml before lovelace became the default interface but changed to the auto one since.
Changing the theme is something I can do, for sure, but:
It breaks the automatic update if any
It is time consuming and I wanted a quick win solution.
Thank you for the help you provided. I keep the card-mod idea in mind and will use it later for sure.
{
"title": "Monitoring",
"path": "monitoring",
"badges": [
{
"entity": "binary_sensor.ha"
}
],
"cards": [
{
"type": "history-graph",
"entities": [
{
"entity": "sensor.ping_ha_vm",
"name": "HA VM"
}
],
"hours_to_show": 24,
"refresh_interval": 0,
"title": "Ping Averages"
}
]
}
This is what my lovelace page looks like from VSCode and I am trying to add icon to the binary_sensor.ha badge
- badges:
- entity: binary_sensor.bbox_ping
icon: 'mdi:router-wireless'
name: BBox
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bbox_ping', 'on') %} green {% else %} red {% endif %};
}
Your code shows different and when I try to paste that into that lovelace file I get different errors.