I have made a mushroom inspired battery card (can also be used for other bar style cards). It is built entirely out of the auto entities card and the bar card.
Does not work without auto entities! Please use auto entities even if you have just 1 bar. It will not work without it
What it looks like with multiple entities.
All you have to do is fill in the <=> sections your colors and icons you want use for the severity. And then choose the entity/entities you want to target with auto entities.
The color of the icon and the bar+background will then update to reflect your colors set automatically.
type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding-top: 5px;
filter:
include:
- entity_id: sensor.office_blinds**battery
options:
type: custom:bar-card
card_mod:
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 13px;
height: 43px !important;
margin-top: -8px;
}
bar-card-row {
margin-bottom: 14px !important;
}
bar-card-name {
color: black;
margin-top: -10px;
}
bar-card-value {
color: black;
margin-top: -10px;
}
ha-icon{
padding: 11px;
border-radius: 100px;
margin-top: -12px;
}
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
}
bar-card-row ha-icon {
color: color-mix(in srgb, var(--bar-color) 100%, transparent);
background: color-mix(in srgb, var(--bar-color) 20%, transparent);
}
ha-card {
padding: 0px !important;
margin: -3px !important;
height: 60px;
}
sort:
method: state
numeric: true
ip: false
ignore_case: false
reverse: false
show_empty: true
card_param: cards
This is the section you will want to change the colors, icons, and the values of for your own purpose:
bar-card-row bar-card-currentbar,
ha-icon, bar-card-backgroundbar {
--bar-color:
{% if states(config.entity) | int <= 10 %}
#ff0026 !important;
--card-mod-icon: mdi:battery-10 !important;
{% elif states(config.entity) | int <= 20 %}
#ff4d00 !important;
--card-mod-icon: mdi:battery-20 !important;
{% elif states(config.entity) | int <= 30 %}
#ff9900 !important;
--card-mod-icon: mdi:battery-30 !important;
{% elif states(config.entity) | int <= 40 %}
#ffcc00 !important;
--card-mod-icon: mdi:battery-40 !important;
{% elif states(config.entity) | int <= 50 %}
#e7fc03 !important;
--card-mod-icon: mdi:battery-50 !important;
{% elif states(config.entity) | int <= 60 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-60 !important;
{% elif states(config.entity) | int <= 70 %}
#aaff00 !important;
--card-mod-icon: mdi:battery-70 !important;
{% elif states(config.entity) | int <= 80 %}
#22c402 !important;
--card-mod-icon: mdi:battery-80 !important;
{% elif states(config.entity) | int <= 90 %}
#22c402 !important;
--card-mod-icon: mdi:battery-90 !important;
{% elif states(config.entity) | int <= 100 %}
#22c402 !important;
--card-mod-icon: mdi:battery !important;
{% else %}
blue
mdi:bug
{% endif %}
And this is the section you will want to change to target your specific entity/entities:
filter:
include:
- entity_id: sensor.office_blinds**battery
You can also use a grid card instead of the stack in card. I just prefer the single card with multiple bars look