Can I please ask how to make the coloring of my icon work based on the SOC?
Code not working (chips)
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: weather.forecast_hjem
- type: entity
entity: sensor.victron_bluetooth_state_of_charge
icon_color: |
{% set soc = states(entity) | int %}
{% if soc > 35 %}
#4caf50
{% elif soc > 25 %}
orange
{% else %}
red
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/1
hold_action:
action: more-info
- type: alarm-control-panel
entity: alarm_control_panel.alarmo
alignment: center
As it works now it defaults to black, but the following works just fine:
Code working (not chips)
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.victron_bluetooth_state_of_charge
icon: |
{% set soc = states(entity) | int %}
{% if soc > 90 %}
mdi:battery-90
{% elif soc > 80 %}
mdi:battery-80
{% elif soc > 70 %}
mdi:battery-70
{% elif soc < 60 %}
mdi:battery-60
{% elif soc < 50 %}
mdi:battery-50
{% elif soc < 40 %}
mdi:battery-40
{% elif soc > 30 %}
mdi:battery-30
{% elif soc > 20 %}
mdi:battery-20
{% else %}
mdi:battery-10
{% endif %}
icon_color: |
{% set soc = states(entity) | int %}
{% if soc > 35 %}
#4caf50
{% elif soc > 25 %}
orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entity: sensor.victron_bluetooth_state_of_charge
name: Forbruksbatteri
height: 42px
min: '0'
max: '100'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-green))
from: 35
to: 100
- color: rgb(var(--mush-rgb-orange))
from: 25
to: 35
- color: rgb(var(--mush-rgb-red))
from: 0
to: 25
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
border: none;
margin-left: 20px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
The battery is the one I am trying to template.
