chakura-uiでbodyのbackgroundを変える方法

chakura-uiでbackgroundの色を全部の画面に適用する方法を紹介します。 chakura-uiではextendThemeがあるので、それをもとに自分のカスタムした themeを作り、providerを指定する際にカスタムで作ったthemeを指定してあげます。

そうすることで、backgroundなども自分の好きなようにカスタマイズすることができます。

//theme.ts
import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme({
  styles: {
    global: {
      body: {
        backgroundColor: 'black',
        color: 'white'
      },
      html: {
       height: '100%'
     }
    }
  }
});

// index.ts
import { ChakraProvider } from "@chakra-ui/react";
import theme from "./Theme";

    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>

参考: How do I change the body background color with TypeScript? #5048