How to set a custom background color?

[ARR4NN]

can someone give me a run down on adding my own background color, I guess I need to use custom css but I don't know how to. Could you please explain

[squidfunk]

Just follow the guide on adding additional CSS and start with the following:

body {
  background: red;
  /* or, using CSS variables */
  --md-default-bg-color: red;
}

For all other questions regarding CSS, I recommend posting them on StackOverflow, as it's not specific to this project.

[ARR4NN]

Do you have a discord i can message you on

[ARR4NN]

i added it

[ARR4NN]

but it doesnt work

[ARR4NN]

[I 210822 11:11:14 handlers:82] Ignore: C:\Users\Ajhar\OneDrive\Documents\PEMC MAIN MASTER\wiki\docs\stylesheets\more.css
INFO    -  Ignore: C:\Users\Ajhar\OneDrive\Documents\PEMC MAIN MASTER\wiki\docs\stylesheets\more.css

[ARR4NN]

why does it ignore it

[ARR4NN]

any ideas?

[ARR4NN]

@squidfunk

[ARR4NN]

Nevermind i got it, sorry for spam

[squidfunk]

Great. I'm marking my original answer again.

[MaximilianKohler]

I did that but it overrides the dark theme option too. --md-default-bg-color: red; seemed to have no impact.

I found #2987 and looked at the "color definitions guide" link but didn't see anything that elucidates.

I'm looking in the other files https://github.com/squidfunk/mkdocs-material/tree/master/src/assets/stylesheets

// Define primary colors here https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_primary.scss looks too limited. IE: I want to make the default background light grey #F0F1F3 instead of white.

I'm guessing it's one of these (?), but I can't decipher that:

    --md-primary-fg-color--light:      hsl(#{hex2hsl(list.nth($colors, 2))});
      --md-primary-bg-color--light:    hsla(0, 0%, 0%, 0.54);

[squidfunk]

You can scope CSS overrides to the light and dark schemes – the selector applies to the body, so just set it there:

/* Light mode */
[data-md-color-scheme="default"] {
  --md-default-bg-color: red;
}

/* Dark mode */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: blue;
}