How to set the default <body> background colour #2207

Indy-Dev · 2020-10-10T13:30:58Z

Indy-Dev
Oct 10, 2020

Hi all,

Our project will not be implementing a dark/light color mode switcher for now, but I'd like the set the background color of the <body> tag. How is that accomplished please as I cannot find anything in the docs?

I'd also like the set other properties on the <html> and <body> tags e.g. height: 100%

Many thanks

Answered by with-heart

Oct 10, 2020

Hi @Indy-Dev, you can use theme.styles.global for that! You can find documentation on that here: https://next.chakra-ui.com/docs/features/global-styles

View full answer

Indy-Dev · 2020-10-10T14:39:07Z

Indy-Dev
Oct 10, 2020
Author

I've accomplished it with

import { Global } from '@emotion/core';

<Global styles={
  {
    backgroundColor: '#212121',
  }
} />

Is this the best approach?

0 replies

with-heart · 2020-10-10T14:55:08Z

with-heart
Oct 10, 2020

Hi @Indy-Dev, you can use theme.styles.global for that! You can find documentation on that here: https://next.chakra-ui.com/docs/features/global-styles

2 replies

Indy-Dev Oct 10, 2020
Author

That's great. Didn't realist there was a version (V.1.X) specifically for NextJJ.

Just upgraded and gonna try your solution.

Thanks for your help.

Library is very nice by the way.

with-heart Oct 10, 2020

Thank you! ❤️

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set the default <body> background colour #2207

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to set the default <body> background colour #2207

Indy-Dev Oct 10, 2020

Replies: 2 comments · 2 replies

Indy-Dev Oct 10, 2020 Author

with-heart Oct 10, 2020

Indy-Dev Oct 10, 2020 Author

with-heart Oct 10, 2020

Indy-Dev
Oct 10, 2020

Replies: 2 comments 2 replies

Indy-Dev
Oct 10, 2020
Author

with-heart
Oct 10, 2020

Indy-Dev Oct 10, 2020
Author