Change Lovelace card background colour

wigster · March 25, 2022, 8:20am

Hi,

I have a bunch of vertical stack cards on my dashboard – lights grouped by room – and I would like each vertical stack group to have a slightly different background colour, to separate them visually. How do I achieve this?

I have seen various code snippets containing style and card commands, but I cannot find any documentation for this. In particular, I’ve tried adding the below without success. If I add it to the vertical stack card, the code editor complains. If I add it to the sub-cards – nothing seems to happen.

   style: |
      ha-card { 
          --ha-card-background: "rgba(30, 30, 30, 0.0)";
      }

browetd · March 25, 2022, 8:38am

Can you share your code ? So we can see the type of card you use and eventually the possibility to change the background color…

wigster · March 25, 2022, 10:05am

For example this is a vertical stack containing to custom light cards. I’d like either the vertical stack or the two subcards to have a changed background.

type: vertical-stack
cards:
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Biurko
    color_wheel: false
    persist_features: false
    brightness: true
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: true
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.group_gabinet_desk
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Łóżko
    color_wheel: false
    persist_features: false
    brightness: false
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: false
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.gabinet_bed

dexstar · March 25, 2022, 11:03am

Try like this my friend.

type: vertical-stack
cards:
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Biurko
    color_wheel: false
    persist_features: false
    brightness: true
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: true
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.group_gabinet_desk
    card_mod:
      style: |
        ha-card {
          background: orange;
          box-shadow: none;
        }
  - shorten_cards: false
    consolidate_entities: false
    child_card: false
    hide_header: false
    header: Gabinet Łóżko
    color_wheel: false
    persist_features: false
    brightness: false
    color_temp: false
    white_value: false
    color_picker: false
    smooth_color_wheel: false
    speed: false
    intensity: false
    force_features: false
    show_slider_percent: false
    full_width_sliders: false
    brightness_icon: weather-sunny
    white_icon: file-word-box
    temperature_icon: thermometer
    speed_icon: speedometer
    intensity_icon: transit-connection-horizontal
    type: custom:light-entity-card
    entity: light.gabinet_bed
    card_mod:
      style: |
        ha-card {
          background: green;
          box-shadow: none;
        }

Result looks like this.

You need lovelace-card-mod installed.

Let me know how you go with it

Holdestmade · March 25, 2022, 12:42pm

I never knew this was possible, I’ve used a template for the colour to change it to red when motion in a room. Thanks

wigster · March 25, 2022, 1:29pm

Fantastisk! Thanks you!

p1977_3 · April 5, 2023, 7:17pm

Question, does card-mod also work with custom:atomic-calendar-revive, I would like to have a png file as background of my calendar.

bearli97 · October 21, 2023, 8:28am

Is there an easy way to change the background color depending on the state of a door sensor?

Holdestmade · October 22, 2023, 1:20pm

This is what I use

card_mod:
  style: |
    ha-card {
      background: {% if states('binary_sensor.door') == 'on' %} red {% endif %}
    }

goldiwro · January 8, 2024, 12:25pm

Can anyone tell me why the background image doesn’t want to show?

type: vertical-stack
cards:
  - type: entities
    entities:
      - sensor.date
      - sensor.date_time
      - sensor.date_time_utc
    card_mod:
      style: |
        ha-card  {
          background-color: black;
          background-image: url('/media/IMG_0854.jpeg');
          background-size: 100%;
          background-position: center;
          filter:  opacity(0.5);
          background-repeat: no-repeat;
          
        }

The image exists of course:

It works if I use HTTP link like:

background-image: url('https://media.architecturaldigest.com/photos/64f71af50a84399fbdce2f6a/16:9/w_2240,c_limit/Living%20with%20Lolo%20Photo%20Credit_%20Life%20Created%204.jpg');```

bobtech · April 21, 2024, 12:05pm

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.

LiQuid_cOOled · April 22, 2024, 5:42am

I see this was a cross post. I have two options on the other thread.

WernerM · April 4, 2025, 2:03pm

Hi!
I have a lot of cards containing like this:

      - type: heading
        icon: mdi:sofa
        heading: Wohnzimmer
        badges:
          - type: entity
            show_state: true
            show_icon: true
            entity: sensor.buro_kg_thermostat_luftfeuchtigkeit
            color: blue
            tap_action:
              action: more-info
          - type: entity
            show_state: true
            show_icon: true
            entity: sensor.buro_kg_thermostat_temperatur
            color: red
            tap_action:
              action: more-info
        card_mod:
          style:
            .: |
              ha-card {
                background-color: #474856 !important;

For convenience, I decided to use cluttering card and made this template:

  subtitle_template:
    card:
      type: heading
      heading: '[[subtitle]]'
      icon: '[[icon]]'
      badges:
        - type: entity
          show_state: true
          show_icon: true
          entity: '[[feuchtigkeitssensor]]'
          color: blue
          tap_action:
            action: more-info
        - type: entity
          show_state: true
          show_icon: true
          entity: '[[temperatursensor]]'
          color: red
          tap_action:
            action: more-info
      card_mod:
        style: |
          ha-card {
            background-color: #474856 !important;
          }

and use it like this:

  - type: custom:decluttering-card
    template: subtitle_template
    variables:
      - subtitle: Wohnzimmer
      - icon: mdi:sofa
      - feuchtigkeitssensor: sensor.buro_kg_thermostat_luftfeuchtigkeit
      - temperatursensor: sensor.buro_kg_thermostat_temperatur

As a result I get the following hierarchie:

Unfortunately my background style doesn’t work any more. I try now since a week and can’t get it working. Any hints? Where can I find a manual about card-mod variables and the meaning of :host .: element $ $element etc. .
This would be a big help.

Ildar_Gabdullin · April 4, 2025, 10:11pm

Styling for Heading card described here:
main card-mod thread - 1st post - fantastic link - heading

WernerM · April 6, 2025, 9:09am

Hi Ildar,
many thanks for your answer. But as I wrote, the styling without cluttering-card was OK. Due to the use of cluttering-card obviously the “path” to the object has changed. And I don’t know how to build a correct path. I’m instantly missing a documentation for how to build a path for card-mod.
I attached the hierarchical stacking of objects in the browser debugging tools. If I compare this to the original stacking, it has changed.

Ildar_Gabdullin · April 6, 2025, 12:18pm

From a point of view of the heading card, nothing is changed. So you can use card-mod examples.

WernerM · April 6, 2025, 1:04pm

Yes, you are right. But the old definition worked, and the new one doesn’t.
The only difference I see is that the old DOM hierarchie was:
hui-card → hui-heading-card → #shadow-root → ha-card
The new one is:
hui-card → decluttering-card → #shadow-root → div “root” → hui-heading-card → etc.
Please compare below:

It’s my guess that the card-mod is starting at a different point.
In both cases card-mod is defined as:

  card_mod:
    style:
      .: |
        ha-card {
          background-color: #474856 !important;
        }

I know how to traverse DOM structures in JS, but I don’t know the meaning of .: or :host or element$ etc.

LiQuid_cOOled · April 6, 2025, 1:13pm

Does this work

type: heading
icon: mdi:sofa
heading: Wohnzimmer
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.buro_kg_thermostat_luftfeuchtigkeit
    color: blue
    tap_action:
      action: more-info
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.buro_kg_thermostat_temperatur
    color: red
    tap_action:
      action: more-info
heading_style: title
card_mod:
  style: |
   ha-card {
    background-color: #474856 !important;
   }

More than a lot of this is detailed here

Ildar_Gabdullin · April 6, 2025, 3:31pm

The point is that the heading card is styled on the card’s level since it does have ha-card.
When placed inside decluttering card - it should keep working.
So your way should be (as was already proposed) to check a standalone Heading card.
If it does not work - check if you have a proper card-mod version 3.4.4.