Change background color of lighting-Card component

Question

Probably super easy, but struggling to change the background color of a Lighting-Card. Any Suggestions? I can get it to change in the console by manipulating element.style

HTML

<template>
    <div class="myColor">
        <lightning-card title="Opportunity Relisting" icon-name="standard:channel_program_history">
            <template if:true={opp.data}>

                <div class="slds-m-around_medium">
                    <h1>RELISTED OPPORTUNITY</h1>
                    <p>{name}</p>
                    <p>{relistStatus}</p>
                    <p>{relistDate}</p>
                </div>

            </template>
        </lightning-card>
    </div>
</template>

CSS

.myColor.THIS  {
    background: red;

}

Images

What I'm trying to get is this...

This one is the current behavior I have...

Answer 1

you can try this, it will work ! :

:host {
    --sds-c-card-color-background: #a1d6e4;
}

Answer 2

One of the ways to customise lightning-card is passing slots that are styled as you wish, for example:

                <lightning-card>
                    <header slot="title" class="slds-page-header slds-page-header_record-home">
                        GroupName 1
                    </header>
                    asdf
                </lightning-card>

Answer 3

Bryan Anderson in the comments below should get the credit for this, so feel free to repost Bryan so I can give you the points.

You have to do a manual build of the LWC to get this feature, at least with the knowledge I have, that is what it took.

1. https://www.lightningdesignsystem.com/components/cards/

Copy this code:

<template>
        <article class="slds-card">
    <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
    <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-standard-account" title="account">
    <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
    </svg>
    <span class="slds-assistive-text">account</span>
    </span>
    </div>
    <div class="slds-media__body">
    <h2 class="slds-card__header-title">
    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
    <span>Accounts</span>
    </a>
    </h2>
    </div>
    <div class="slds-no-flex">
    <button class="slds-button slds-button_neutral">New</button>
    </div>
    </header>
    </div>
    <div class="slds-card__body slds-card__body_inner">Anything can go into the card body</div>
    <footer class="slds-card__footer">
    <a class="slds-card__footer-action" href="javascript:void(0);">View All
    <span class="slds-assistive-text">Accounts</span>
    </a>
    </footer>
    </article>
</template>

Then mark the 'slds-card' with the background selector and change the color in a CSS file or Inline-Style (didn't try inline but assuming it will work).

I don't like this solution but it appears to be the only way to get it to work.

Answer 4

If you're just setting the background colour for the card, you can use the :host pseudo class, which targets the shadow host of the shadow DOM.

In the CSS

:host {
  --slds-c-card-color-background: var(--c-example-red);
}

Find more info on "Styling Hooks"