Change button background color if...

You can use the following code, but bear in mind that it will work only if you have a folder called "battery" on Desktop, having icons called as so: b1, b2, b3, b4, bCharging.

I've attached the icon resources I've used battery.zip (16.5 KB) so you can simply unzip it on Desktop. You can change the icons but don't forget to change the path in the code.

set batteryPercentage to word 6 of paragraph 2 of (do shell script "pmset -g batt") as number

set title to "\"text\":\"" & (batteryPercentage as string) & "%\""

if batteryPercentage < 10 then
	set fontColor to "\"font_color\":\"255,0,0,255\""
else
	set fontColor to "\"font_color\":\"255,255,255,255\""
end if

try
	do shell script "pmset -g batt | grep -wci \"charging\""
	set isCharging to true
on error errmsg number errnr
	set isCharging to false
end try

if isCharging then
	set icon to "\"icon_path\":\"~/Desktop/battery/bCharging.png\""
else if batteryPercentage > 75 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b4.png\""
else if batteryPercentage > 50 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b3.png\""
else if batteryPercentage > 25 then
	set icon to "\"icon_path\":\"~/Desktop/battery/b2.png\""
else
	set icon to "\"icon_path\":\"~/Desktop/battery/b1.png\""
end if

return "{" & title & "," & fontColor & "," & icon & "}"

In order to determine wether the laptop is charging or not I've used pmset -g batt and notice it displays wether it is "charging" or "discharging", and with a simple grep we can look after that text. Note that grep will have a non zero exit code if no matches are found, so the shell script call is wrapped on a try clause.

You can adjust the intervals after your needs. Hope this helps you.

Note: I've got the battery status icons from https://www.flaticon.com/packs/battery-status