1

How do you change the background of an OSS LWC application using SLDS? I would like it to be something different than is pale blue.

EDIT: I have tried setting the background via CSS, or changing the SLDS theme and neither have worked:

I haven't had much luck with either approach:

app.css

body {
    background-color: coral;
}

app.html

<template>
    <div class="slds-theme_default">
        <my-header></my-header>
        <lightning-tabset>
            <lightning-tab label="About Me" title="About Me">
...

Neither have an impact on the blue background.

Tabs with light blue background

1
  • Is it possible that your CSS selector isn't specific enough? Try adding !important to your CSS just to see if that will override the sleds background color. If it does, then a selector that's more specific than the slds selector should do the trick
    – Sean
    Commented Dec 24, 2020 at 15:05

3 Answers 3

2

I had used the class="slds-box slds-theme_default" at top level component and doing so fixed the issue for me.

0

As far as what's in SLDS, you can choose one of several Themes, such as slds-theme_inverse or slds-theme_success. If you don't want to use those colors, then you can set your own background color directly on the container element instead, or any specific component. Local CSS will override the global defaults.

1
  • I haven't had much luck with either approach: I added some examples in the question. Commented Dec 24, 2020 at 13:48
0

The background color comes directly from the styling that's present in the top level html element present.

You can easily change this color in the salesforce-lightning-design-system.min.css file by changing the below line

html{background:coral..;

or alternatively in your index.html create an override with !important. This approach is a bit hacky and I would avoid it.

<style>

html {
  background-color: white !important;
}

</style>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .