How to set different background color/image for cards in lovelace using card_mod?

Configuration Frontend
1

Please help me to figure out what am I doing wrong. I want to have different colors for each card, but seems that last style applies to all previous cards.

image

2

I notice you’re using custom html cards. Have you tried doing this with a standard HA card, just to see what happens? Maybe a tile card?

3

I don’t know how to style standard HA cards, this is why I used custom html. Do you have some example?

4

Card mod works in much the same way (though tile cards have quite a lot of built-in options):

      - type: tile
        entity: light.study_spotlights
        icon: mdi:track-light
        vertical: false
        show_entity_picture: false
        hide_state: true
        color: '#becbf1'
        tap_action:
          action: toggle
        name: Study
        card_mod:
          style: |
            ha-card { 
              {% if is_state('light.study_spotlights', 'on') %}
              --ha-card-background: #364366;
            {% endif %} 
              }
5

Why use --ha-card-background and not background?

6

With only 1 card, works ok, but I need 3 html cards with different background color.

7

This is my view configuration:

  • last HTML card overrides css for previous
  • markdown cards work ok, keep individual css settings

image
image351Ă—768 11.1 KB

8

This is the output:

image
image765Ă—329 7.96 KB

@thomasloven is this a bug or what am I doing wrong?

9

This is not a card-mod issue IMO.

The issue is actually the way the html-card is designed. If you stack the cards inside individual stacks, the card-mod works fine. The cards do not appear to me to be ::slotted() when in an individual stack.

type: custom:stack-in-card
cards:
  - type: custom:html-card
    title: HTML card
    content: >
      Sun state: <b>[[sun.sun]]</b>, elevation:
      [[sun.sun.attributes.elevation]]</br>
    card_mod:
      style: |
        ha-card {
          background: pink !important;
          color: black;
          }
  - type: custom:stack-in-card
    cards:
     - type: custom:html-card
       title: HTML card
       content: >
        Sun state: <b>[[sun.sun]]</b>, elevation:
        [[sun.sun.attributes.elevation]]</br>
       card_mod:
        style: |
          ha-card {
          background: green !important;
          }
                 
  - type: custom:stack-in-card
    cards:
     - type: custom:html-card
       title: HTML card
       content: >
        Sun state: <b>[[sun.sun]]</b>, elevation:
        [[sun.sun.attributes.elevation]]</br>
       card_mod:
        style: |
          ha-card {
          background: teal !important;
          }

image
image925Ă—905 32.1 KB

1 Like
10

Another option…

Others may have better suggestions.

image
image947Ă—962 33.3 KB

type: custom:vertical-stack-in-card
cards:
  - type: custom:html-card
    title: HTML card
    content: |
      Sun state: <b>[[sun.sun]]</b>, elevation: [[sun.sun.attributes.elevation]]
  - type: custom:html-card
    title: HTML card
    content: |
      Sun state: <b>[[sun.sun]]</b>, elevation: [[sun.sun.attributes.elevation]]
  - type: custom:html-card
    title: HTML card
    content: |
      Sun state: <b>[[sun.sun]]</b>, elevation: [[sun.sun.attributes.elevation]]
card_mod:
      style: |
        ha-card {
          color: black;
          border-width: 0;
          }
        :host{
           --ha-card-background: dodgerblue !important;

              }  
        :nth-child(2){
           --ha-card-background: green !important;
           color: yellow;
              }  
        :nth-child(3){
         --ha-card-background: teal !important;
1 Like
11

html-card is not using shadowDOM, so the styling is “leaky”. I think the workarounds above are the best solution.