Entity Progress Card - Color of Background bar?

[flautze]

Hello,
since I have been looking already in the documentation and elsewhere, does anyone know how to change color of the bar in the background?
There does not seem to be a config option, and I could not figure out how to do it with card-mod. Is there a way to change that color?

[dcapslock (Darryn Capes-Davis)]

You should be able to use the css var —epb-progress-bar-background-color with a style rule for ha-card {} with card-mod.

[flautze]

@dcapslock

—epb-progress-bar-background-color

Thanks for the suggestion. Is there any documentation where I can find the CSS-tags for the progress bar card? Or how can I find out which tags are available?

Unfortunately it seems like I m doing it wrong or it does not work…

[dcapslock (Darryn Capes-Davis)]

@flautze

Unfortunately it seems like I m doing it wrong or it does not work…

Should work. I think the forum has made my -- into a long dash or something, or because my response was on iPad before. My yaml below works fine.

type: custom:entity-progress-card
entity: light.bed_light
attribute: brightness
card_mod:
  style: |
    ha-card {
      --epb-progress-bar-background-color: red;
    }

@flautze

Is there any documentation where I can find the CSS-tags for the progress bar card?

Check the inspector or review the code.

[flautze]

Thanks, you are right. I also did not see it and simply copy your code.

[LiQuid_cOOled]

@flautze You marked your own post as the solution. Out of courtesy, I’d suggest marking dcapslock’s post as the actual solution.

[flautze]

Yes you are right. It’s kind of hard on mobile to see which one belongs to which post.

I have that corrected.

Also here is the result.