[Theme] Body background color is not being changed

Describe the bug https://codesandbox.io/s/chakra-ts-starter-sn639

I have created a theme and changed the background however it is not being applied

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    background: "red.500"
  }
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Heading>Welcome</Heading>
    </ThemeProvider>
  );
}

Expected Behavior The body background should change to red.500

To Reproduce https://codesandbox.io/s/chakra-ts-starter-sn639

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Firefox Developer Edition
• Version: 77.0b9

Additional context https://theme-ui.com/theming/, says here changing the body , changes the Body background color

[santialbo]

You can set the background color on the <CSSReset/> element. Check this updated codesanbox https://codesandbox.io/s/chakra-ts-starter-fn3yt?file=/src/index.tsx

const config = (theme: ITheme) => ({
  light: {
    color: theme.colors.gray[700],
    bg: theme.colors.red[500],
    borderColor: theme.colors.gray[200],
    placeholderColor: theme.colors.gray[500]
  },
  dark: {
    color: theme.colors.whiteAlpha[900],
    bg: theme.colors.gray[800],
    borderColor: theme.colors.whiteAlpha[300],
    placeholderColor: theme.colors.whiteAlpha[400]
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset config={config} />
      <Heading>Welcome</Heading>
    </ThemeProvider>
  );
}

[geocine]

Oh dang, thank you @santialbo , I think this works for me so I’ll be closing this issue.