How to adjust body background color with gatsby-plugin-theme-ui

Question

When building a Gatsby theme with gatsby-plugin-theme-ui, the documentation states that you can adjust the background color of the body by adding it to your theme object in the nested colors object. This appears to have no effect. Other variables such as fonts and styles are pulling in correctly, but I can't seem to get the background to change other than adjusting it on individual elements. Is there an additional step to get this to work?

Using setInitialMode and defining a dark mode was able to change the background, but this seems like a hacky solution as I'm not trying to build in theme color switching.

Here is my theme configuration file in the src/ directory:

theme.js

export const theme = {
  space: [0, 4, 8, 16, 32],
  fonts: {
    body: "Alegreya Sans SC, system-ui, sans-serif",
    heading: `Archivo Black, system-ui, sans-serif`,
  },
  fontSizes: [16, 18, 20, 22, 27, 36, 72],
  lineHeights: {
    body: 1.45,
    heading: 1.1,
  },
  colors: {
    background: "blue",
    text: "purple",
    primary: "purple",
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
  styles: {
    body: {
      margin: 0,
      padding: 0,
    },
    h1: {
      color: "primary",
      fontSize: 6,
      fontWeight: "bold",
      lineHeight: "heading",
      fontFamily: "heading",
    },
    ul: {
      borderTop: "1px solid",
      borderColor: "gray.0",
      listStyle: "none",
      padding: 0,
    },
    li: {
      borderBottom: "1px solid",
      borderColor: "gray.1",
      padding: 2,
      "&:focus-within,&:hover": {
        backgroundColor: "gray.0",
      },
    },
  },
}

export default theme

index.js in the src/gatsby-plugin-theme-ui/ directory:

import theme from "../theme"

export default theme

No error messages are created. The background remains with the default color regardless of what color is entered - hex, rgba or otherwise.

score 4 · Answer 1 · answered Sep 03 '19 at 08:24

I think I figured out a way.

Create a component called Global.

import React from 'react'
import { Global } from '@emotion/core'

export default props =>
  <Global
    styles={theme => ({
      body: {
        color: theme.colors.text,
        backgroundColor: theme.colors.background,
      }
    })}
  />

Then import it in your index.js as follows.

// with your imports
import { Global } from '@emotion/core'

// then in the return portion of the function
return (
    <>
      <Global />
      {...otherComponents}
    </>
  )

Setup part of component Global is from the theme-ui docs although they do not seem to explain how to use after setup at all.

score 2 · Answer 2 · answered Jul 26 '19 at 20:29

I can still not get the code as documented to work. A workaround I have found is to add initialColorMode: default and pass an empty modes object to colors. This makes it pick up the background correctly at that point from the colors object but seems hacky.

export const theme = {
  initialColorMode: `default`,
  space: [0, 4, 8, 16, 32],
  fonts: {
    body: "Alegreya Sans SC, system-ui, sans-serif",
    heading: `Archivo Black, system-ui, sans-serif`,
  },
  fontSizes: [16, 18, 20, 22, 27, 36, 72],
  lineHeights: {
    body: 1.45,
    heading: 1.1,
  },
  colors: {
    background: "white",
    text: "black",
    primary: "#111",
    accent: "white",
    modes: {},
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
}

There is definitely something weird and I am unable to reproduce the theme-ui docs for gatsby either. I think it's supposed to just work out of the box but that does not appear to be the case. Either that or the philosophy is to create an urgent sense of highly cryptic verbosity in style definition. — aashanand, Sep 03 '19 at 08:01

score 1 · Answer 3 · answered May 12 '21 at 00:31

You can use createGlobalStyle in your Layout component, import it and set it up. In my case I used it to change the background color and to apply a gradient, you can check the official website here

import React from "react"
import { LayoutWrapper } from "./styles"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    height: 100%;
    background: linear-gradient(to left, #ddd6f3 0%, #faaca8 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
`
export function Layout({ children }) {
  return (
    <LayoutWrapper>
      <GlobalStyle />
      <main>{children}</main>
    </LayoutWrapper>
  )
}

score 0 · Answer 4 · answered Jun 11 '21 at 04:15

Wrap The Properties of Styles in Root Object !!!

This is definitely a problem with theme ui. in your styles object in the theme ui index file. you need to wrap the styles in root

gatsby-plugin-theme-ui/index.js

  color: {},
  breakpoints:[],
  styles: {
    root: { // wrap in root object. this is the way
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      minHeight: '100vh',
      backgroundColor: 'blue', // this is what you want
      h1: {
        variant: 'text.heading',
        fontSize: 5,
      },
      h2: {
        variant: 'text.heading',
        fontSize: 4,
      },
      ...rest
    },

How to adjust body background color with gatsby-plugin-theme-ui

4 Answers4

Wrap The Properties of Styles in Root Object !!!