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

Share your Projects! Dashboards & Frontend
9761

Even w/o my mentioned js-file hack, old badges in 3.x were also moddable with mod-card.
Will check now if it works in 4.x. give some time.

4.x:
This works:

  - type: custom:hui-state-badge-element
    entity: sensor.xxx
    card_mod:
      style: |
        :host {
          color: orange;
          --label-badge-text-color: red;
          --label-badge-red: cyan;
          --label-badge-background-color: yellow;
          --ha-label-badge-label-color: green;
        }

And mod-card method works too:

  - type: custom:mod-card
    card:
      type: custom:hui-state-badge-element
      entity: sensor.xxx
    card_mod:
      style: |
        :host {
          color: orange; /* does not work, need to go down in DOM */
          --label-badge-text-color: red;
          --label-badge-red: cyan;
          --label-badge-background-color: yellow;
          --ha-label-badge-label-color: green;
        }

Repeat, in 3.x the mod-card way worked too.

1 Like