I’ve been hunting high and low this evening trying to find the full code to implement the same circle battery levels inside cards that display the other sensors. Any chance you could provide a link?
I am personally using decluttering card to set variables
https://github.com/custom-cards/decluttering-card
This is only for the developper panel where you can test jinja2 templates. Unrelated to what button-card is doing or any other card.
You need to use css transitions for that but it works unreliably with media_player images as those are fetched asynchronously. Nothing I can do on button-card.
Yeah, that’s because the icon represents the color of the light, and if the light is set to pure white (rgb(255, 255, 255)), then the icon is going to be white and since your background is white also it’s displayed but not visible. I’m not sure how to fix this because everyone has a different theme and the background color is different for everyone.
2 Likes
But the icon shows as yellow in HA. That was shown in the image. Also if I use an entity card it shows yellow. I get that it’s white. Just shows different that in HA natively. Also I swear that this started maybe 4 or 5 versions ago and was not always like that. But I could be wrong.
I don’t think HA’s icon follows the color of the light anymore. If you don’t want the icon to follow the color of the light then you can use an empty value for the color parameter and then the icon will be yellow (or whatever your theme defines as the color for on).
- type: custom:button-card
color:
entity: light.my_light
HA does Still follow color icons. But maybe not for white.
As for default Home Assistant behavior:
If it’s slightly off white, it shows the color. If it’s exactly white, it shows paper-item-active-icon-color.
Sorted it with thanks to this post Lovelace: Button card
color: green
color_type: icon
custom_fields:
notification: |
[[[ return states['sensor.steel_gate_battery_level'].state ]]]
entity: binary_sensor.door_window_sensor_steel_gate
icon: 'mdi:gate'
name: Steel
size: 40%
state:
- color: red
icon: 'mdi:gate'
styles:
icon:
- animation: blink 10s ease infinite
value: 'on'
- color: orange
icon: 'mdi:gate'
styles:
icon:
- animation: blink 3s ease infinite
value: unavailable
- operator: default
styles:
card:
- height: 85px
- border-radius: 3%
- border: 'solid 2px rgba(255,255,255,.2)'
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.steel_gate_battery_level'].state >= 98)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 5%
- height: 18px
- width: 18px
- font-size: 9px
- line-height: 18px
grid:
- position: relative
type: 'custom:button-card'
2 Likes
Is there a way to change that behavior?
No, you can’t really change icon color without custom-ui or something.
It’s just weird to me that HA shows yellow icon when I set it to pure white, button card sets it to while. I dont know enough about theming, etc to know why the button card shows the “true” color and an HA entity card shows yellow. It’s not a big deal, just weird to me.
The --paper-item-icon-active-color is yellow, so HA uses it for a white light on. button-card uses its own color calculation model.
1 Like
You could template it with JS using the RGB value in the entity on the color field.
[[[ return (entity.attributes.rgb_color === [0, 0, 0]) ? 'var(--paper-item-icon-active-color)' : 'auto'; ]]]
EDIT: Might need to add logic for on/off. You’d also need to add a greyscale template to the icon when it’s on. It’s more work than it’s worth.
1 Like
Thank you and thanks as well to @KTibow. All makes sense and as you said, may not be worth the effort. One question, HA seems to me to always show the correct color, other than white. Is that the reason why the button card does its “own color calculation model”. I guess that would make sense. I guess white is a valid color, and HA does not display white, and if you have your theme set appropriately then it would show the actual color even if HA is showing it as “yellow”. Other than that scenario, I cannot think of another reason to use a different calculation model, right.
I believe the separate color calc model is because HA’s model is not accessible from a custom card.
1 Like
@petro’s approach is the best, the only thing is that color doesn’t support templates so in the meantime you’ll have to use states instead:
state:
- operator: template
value: >
[[[
if (entity.state === 'on' && entity.attributes.rgb_color) {
let rgb_sum = entity.attributes.rgb_color.reduce((a, b) => a + b, 0);
return rgb_sum > 3 * 230; // adjust the value to match when you want to switch to the default icon color
}
return false;
]]]
color: var(--paper-item-icon-active-color)
2 Likes
I’m 100% sure it’s me not fully understanding, but I’m not having any success. I’ve made the change like so
color: auto
color_type: icon
entity: light.left_shelf_lights
hold_action:
action: more-info
label: |
[[[
if (states['light.left_shelf_lights'].state == 'off') return "Off";
else return 'Brightness ' + (Math.round(states['light.left_shelf_lights'].attributes.brightness / 2.55)) + '%';
]]]
states:
- operator: template
value: >
[[[
if (entity.state === 'on' && entity.attributes.rgb_color) {
let rgb_sum = entity.attributes.rgb_color.reduce((a, b) => a + b, 0);
return rgb_sum > 3 * 230; // adjust the value to match when you want to switch to the default icon color
}
return false;
]]]
color: var(--paper-item-icon-active-color)
layout: icon_label
show_label: true
show_name: true
styles:
card:
- height: 100px
icon:
- align-self: flex-start
- height: 100%
- width: 100%
label:
- font-size: 12px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
name:
- font-size: 16px
- justify-self: center
- text-overflow: unset
- white-space: unset
- word-break: break-word
- font-weight: bold
type: 'custom:button-card'
No errors, but not change. I’ve tried chaning the value from 230 to 255, all the way to 1, and no change.
The attribute for my light - attributes.rgb_color returns (255,255,255), I admit I dont fully understand the .reduce part of the template above I “think” its just cutting (255,255,255) down to (255, 255)?? Honestly not fully following. haha. would you mind giving a brief description? Or maybe I put it wrong in the button code.
EDIT: Nevermind figured it out. Small typo
It’s
State: not States: 
Thank you so much for the assist! @RomRider
The answer is easier that you’d imagine. It’s summing the list together. (255, 255, 255) → 765.
1 Like
My bad, I typed this on my phone 
will update the original post
1 Like
thanks Romrider, good to know.
Since we have you here now, please have a look at Lovelace: Button card - #4524 by Mariusthvdb once more, I cant get tooltips to show up ( like I need it and think how to configure it (on an icon), either with or without extra styles)
Oddly enough I occasionally see a tooltip on a set buttons elsewhere in the config, but, these are not always there, and, not on all buttons, while they are all of the same button-card-template…
All in all, I could need your help as author of the card.