Body background color does not change when using "dark" theme

[SaadBazaz]

Description

The background color of the document's body should automatically update if I select the "dark", "night" or similar themes.

I don't know if this is expected behaviour. If it isn't, I'd certainly want it to be.

This is what I see in normal mode:

But this is what I see if I simply use colorMode={"dark"}:

However, if I manually set backgroundColor: "black" in index.css, it looks good:

Steps to reproduce

1. Create a fresh React app through create-react-app
2. Install primer
3. Add ThemeProvider to App.js
4. Use the "dark" theme

Version

v35.10.0

Browser

Chrome, Safari

[Ephantuz]

Did you find the help you needed?

[SaadBazaz]

Nope. Not yet.

[siddharthkp]

Hi!

Yep, this is intentional. ThemeProvider only affects the contents inside of it.

You can either wrap the entire page in a ThemeProvider and use canvas.default to set the background (here's an example) or you do that with global styles in styled-components and themeGet from primer/react

Side note: Just curious, are the screenshots from a github page or another product?

[siddharthkp]

I hope that answers your question!

Feel free to reply if not and I'll open the issue again

[SaadBazaz]

@siddharthkp got it! Makes sense anyway. I'll work on what you suggested.

About the screenshots; it's something I'm building which might be of interest to GH.

Let's talk, maybe?

[siddharthkp]

Yeah, feel free to DM me :)

[Zwyx]

Hey guys,

I was also quite surprised with this behaviour, and I spent quite some time reading the doc again and again trying understand what I was doing wrong for my background to not follow the dark theme.

Thanks to your messages here, I wrapped everything inside a <Box bg="canvas.default" minHeight="100vh">.

I believe an example like this really deserves a spot in the documentation at https://primer.style/react/theming#color-modes-and-color-schemes

I'm keen to create a PR if it's something you would agree with?

EDIT: it seems usual for UI libraries to include the body's background color in their CSS baseline. Material UI does it for instance. Primer also provide <BaseStyles>, wouldn't it make sense to include it in as well?