Change badge color based on state

[bphillips921 (Brad Phillips)]

I have several badges on top of my lovelace dashboard to show the state of several doors. The icon changes based on the door state but that’s hard to see. Is there a way to change the badge outline to a different color when the door is open as when it’s closed?

[tom_l]

Install card mod and have a read of this post:

Card-mod - Add css styles to any lovelace card

Styling badges: (summarized post) Tried to summarize everything that was discussed by Mariusthvdb and me starting from this post and below. Quick styling using “:host” for the following elements: name - displayed under the badge; state or icon - displayed inside the badge; label - displayed in the bottom part of the badge (used for displaying a unit for “sensor” , a state for “device_tracker”); background - color of the badge internal; circle - color of the border. Examples below are for: …

[Olivier1974 (Olivier Toussaint)]

How to customize the badges at the top of the page?

You, yes you that came here looking for the answer, here it is Install the card-mod extension (via HACS is the easiest) Activate card-mod in your lovelace config Use the following configuration (in yaml) for your badge: - badges: - entity: binary_sensor.bbox_ping icon: 'mdi:router-wireless' name: BBox card_mod: style: | :host { --label-badge-blue: {% if is_state('binary_sensor.bbox_ping', 'on') %} green {% else…

[Ola.Lofdahl (Ola)]

That works great with a badge I´ve been wanting to customize for some time however I do have a question, can the text and icon be swapped out the same way?