[lovelace-card-mod] Badge color issue

Share your Projects! Dashboards & Frontend
1

I had Badges for person and sun on the Dashboard.

e.g: sun

    badges:
      - entity: sun.sun
        style: |
          :host {
            {% if is_state('sun.sun', 'below_horizon') %}
              --label-badge-red: blue;
            {% else %}
              --label-badge-red: yellow;
            {% endif %}
          }

On startup or edit dashboard the color is set correct:
image

After a browser refresh it appears not modified:
image

Same issues with persons. A while a go it works fine.

Any ideas for that?

2

I am also encountering similar inconsistancies after upgrading to 2023.04. When starting up the webapp/Mobile app, badges are appearing with the wrong colors. After some time the badge color change to the right color in alignment with the state. I did not have this problem on 2023.01

eg location

“badges”: [
{
“entity”: “person.bart”,
“name”: “Bart”,
“style”: “:host { --label-badge-red: {% if is_state(‘person.bart’, ‘Home’) %} green {% else %} red {%endif %}; --label-badge-text-color: {% if is_state(‘person.bart’, ‘Home’) %} green {% else %} red {%endif %}; }”

3

Cannot confirm.

views:
  - theme: ''
    title: xxxx
    path: xxxxx
    badges:
      - entity: sun.sun
        card_mod:
          style: |
            :host {
              {% if is_state('sun.sun', 'below_horizon') %}
                --label-badge-red: blue;
              {% else %}
                --label-badge-red: yellow;
              {% endif %}
            }

Changes colors in Win10+Chrome & Companion App (iOS 15.x).

4

even with card_mod: not working on App, Firefox, Edge, Opera, Vivaldi

5

Startup oder after edit:
image

Reload, Rereach site:
image

6

Suggest you to move to card-mod thread to get a chance of getting feedback from more users.

7

Same here. After updating to 2023.04 the badge colors cannot be modified manually.
After saving the configuration file they look good (correct modified colors), but after refresh the browser it goes back to default color.
Problem is seen both with Chrome browser and with the Android app.

1 Like
8

Have you guys found a solution. I’m having the same issue the colour updates after a while. If I fully close the app and open it again it falls back to default colours and then take a little to get the right colour reflected in the badges

9

I am experiencing the same problem on the 2023.06 using thelatest app. Colors are fine when starting up and after a while it switches back to the default colors. I am using a card_mod in badges:

type: custom:badge-card
badges:
  - entity: person.xxxxx
    name: xxxxx
    card_mod:
      style: |
        @keyframes blinker { 50% { opacity: 0; } }
        :host {
          {% if is_state('person.xxxxx', 'Home') %}
            --label-badge-red: green;
            --label-badge-text-color: green;
            color: green;
          {% else %}
            --label-badge-red: red;
            --label-badge-text-color: red;
            color: red
            animation: blinker 4s linear infinite
          {% endif %}
        }
1 Like
10

I’m using the card_mod under badges just like you and wondering how come no one else raising this an issue or is there a better/or another way to do that ?

11

No solution yet :neutral_face:

Same in other Icons e.g. waste collection

Screenshot_20230618-141033
Screenshot_20230618-141033557×547 18.7 KB

Screenshot_20230618-140912
Screenshot_20230618-140912521×515 20.1 KB

12

How is this related to the topic?

13

You have errors in the code.
Missing “;”.
Wrong state value for a “person”.
Not to mention a fact that custom:badge-card does not have ha-card.
Seems that you copy-posted a code from somewhere.

14

Same issue with moded Icons/badges

15

Why do not you come to the card-mod thread and describe your case?
This is much better than saying this here.
At least you will get more attention.

16

where is th card-mod thread? didn’t find tag or subcategrory.

17

It is located inside Share your projects section