You may not be happy with my solution, but I solved the same problem with mushroom using image instead icon and different images saved in HA’s “www” folder (each image has different border color) like so:
{% if states('person.myprecious')=='home' %}
/local/bgreen.png
{% elif states('person.myprecious')=='not_home' %}
/local/bred.png
{% else %}
/local/byellow.png
{% endif %}
Example of bred.png
Thank you, this is what i was thinking as well… Just wanted to see if anyone out there had any other suggestions. I will prob implement this though
Hi Romain,
can you give me the full syntax for a badge configuration in yaml-mode, please?
My old ones are of this syntax:
- entity: sensor.pool
name: Pool
display_type: complete
state_content: state
color: red
icon: mdi:thermometer
card_mod:
style: |
:host {
--label-badge-red: orange;
I don´t know how to start under badges…
I managed it myself… 
views:
- badges:
- type: custom:mushroom-template-badge
content: "{{ states('sensor.aussentemperatur_2') }} °C"
label: Aussen
color: |
{% if states('sensor.aussentemperatur_2') | float >= 35 and states('sensor.aussentemperatur_2') | float < 45 %} darkred
{% elif states('sensor.aussentemperatur_2') | float >= 30 and states('sensor.aussentemperatur_2') | float < 35 %} red
{% elif states('sensor.aussentemperatur_2') | float >= 25 and states('sensor.aussentemperatur_2') | float < 30 %} orange
{% elif states('sensor.aussentemperatur_2') | float >= 20 and states('sensor.aussentemperatur_2') | float < 25 %} yellow
{% elif states('sensor.aussentemperatur_2') | float >= 10 and states('sensor.aussentemperatur_2') | float < 20 %} green
{% elif states('sensor.aussentemperatur_2') | float >= 5 and states('sensor.aussentemperatur_2') | float < 10 %} grey
{% elif states('sensor.aussentemperatur_2') | float >= 0 and states('sensor.aussentemperatur_2') | float < 5 %} cyan
{% elif states('sensor.aussentemperatur_2') | float >= -5 and states('sensor.aussentemperatur_2') | float < 0 %} blue
{% else %} purple
{% endif %}
icon: mdi:thermometer
I’m using iOS Themes what I need to do to make badges transparent as card below? Is it theme problem?
Hi,
I struggled also and I set on using the mushroom template card with renders like this and can be used as badges
The code for one of them is as follows, it’s possible to change, with card_mod, background color, shape, lines palcement, etc…
type: custom:mushroom-template-card
primary: '{{states(entity)|round(1)}}°C'
secondary: Intérieur
icon: mdi:home
icon_color: cornflowerblue
fill_container: false
layout: vertical
multiline_secondary: false
entity: sensor.temperature_interieure
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--icon-size: 36px !important;
background:
{% if (states(config.entity) | int(-1000) == -1000 ) -%} var(--disabled-color)
{% elif (states(config.entity) | float <= 8 ) -%} royalblue
{%- elif (states(config.entity) | float <= 17 ) -%} lightskyblue
{%- elif (states(config.entity) | float <= 18.5 ) -%} lightcyan
{%- elif (states(config.entity) | float <= 26 ) -%} var(--success-color)
{%- elif (states(config.entity) | float <= 28 ) -%} coral
{% else %} red
{% endif %};
width: 5rem !important;
height: 3rem !important;
--title-padding: 0px !important;
--chip-avatar-padding: 0px;
--spacing: 0px;
--card-primary-font-weight: 800;
--card-primary-font-size: 1rem;
--card-secondary-font-size: 0.9rem;
--card-primary-line-height: 20px;
--card-secondary-line-height: 20px;
}
With my post just before and mushroom-template-card you can make it transparent by setting the background color to rgba format, like rgba(1,1,1,0.2).
Maybe not the simplest solution though.
Yes I am hoping for a theme variable as well, I am trying to get less rounded corners
Dont working for me ;-(
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
It is only working in the full context. Is it in an entities card like mine?
Yes
views:
- theme: Backend-selected
title: Home
layout:
width: 540
max_cols: 2
min_hight: 1
badges:
- type: custom:hui-state-badge-element
entity: alarm_control_panel.mieszkanie
name: Alarm
display_type: complete
card_mod:
style: |
:host {
{% if is_state('alarm_control_panel.mieszkanie', 'disarmed') %}
--label-badge-background-color: rgba(0,255,0,0.1);
--label-badge-red: green
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1);
--label-badge-red: red
{% endif %}
}
This is the badge section of a view. It is not working there, it is only working in a card, the badge section is not (yet) “card_modable”.