OSS SLDS + LWC Background Color

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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>