🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
680

I realize it can be tricky to understand what’s going on. I will update the documentation soon - but I need some rest first.

The basics is that you have some new theme variables, card-mod-{thing} where thing can be e.g. card, row, glance… and that’s where you put what you’d earlier put in style:.

It’s important that the variable values are strings, so the | is absolutely vital.

E.g:

card-mod-card: |
  ha-card {
    background: red;
  }

card-mod-row: |
  :host {
    background: blue;
  }

Edit:
Oh! And card-mod now adds a class to every card depending on it’s type, and lets the user add more.

So e.g.

card-mod-card: |
  ha-card {
    background: purple;
  }
  ha-card.type-button {
    background: teal;
  }
  ha-card.pink {
    background: pink;
  }

Would make all cards purple except buttons, which would be teal, and cards where the user has specified:

type: entities
class: pink
entities:
  - light.bed_light

which would be pink.

4 Likes