How do I change the body background color with TypeScript?

[BurgerBurglar]

I want to change the body background color for both light and dark modes. I found this on Sandbox, but it doesn't work anymore on 1.X. What can I do?

[dmitriifrlv]

1. Create a custom theme where you define background colors for both modes:

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

const theme = extendTheme({
  config,
  styles: {
    global: (props) => ({
      body: {
        bg: mode(*color for light mode(string)*,*color for dark mode(string)*)(props),
      }
    })
  },
})

2. Pass this theme to ChakraProvider:

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

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

Demo

[tombohub]

where is typescript?

[CoreyGumbs]

where is typescript?

You dont need to add typescript to this as you are making the change within the theme config file of chakra ui

[tombohub]

without type of the object, there is no intellisense

[bnchrch]

jfc...

[givensuman]

without type of the object, there is no intellisense

I know this question is old but you can access the type of props with StyleFunctionProps:

//theme.ts
import { extendTheme } from "@chakra-ui/react";
import type { StyleFunctionProps } from "@chakra-ui/styled-system";
import { mode } from "@chakra-ui/theme-tools";

const theme = extendTheme({
  config,
  styles: {
    global: (props: StyleFunctionProps) => ({
      body: {
        bg: mode(*color for light mode(string)*,*color for dark mode(string)*)(props),
      }
    })
  },
})

[BurgerBurglar]

Thanks. In my browser it got overridden by other CSS values. I don't know where to start debugging. Any ideas?

[dmitriifrlv]

It's difficult to say what's the reason for that without full reproduction of the issue. However, I'd start by commenting out everything inside <ChakraProvider theme={theme}> to find out what causes style overriding + checking that there're no other places in your app where you set styles.
Also, check that your <ChakraProvider theme={theme}> is located at the top of your app (index.ts if you uses create-react-app)

Full guide on working with colors

[guruputran]

inside index.html, find body tag. Then
body style="background-color:black;"

[AoverK]

You can change the background color with Typescript as shown below.

Add the following to your file where you create your theme

import { StyleFunctionProps } from '@chakra-ui/theme-tools'

styles: {
      global: (props: StyleFunctionProps) => ({
        body: {
          color: 'default',
          bg: '#FFFFFF',
        },
      }),
    },

The full file looks like the following:

import type { AppProps } from 'next/app'
import { Center, ChakraProvider, extendTheme, Spinner } from '@chakra-ui/react'
import { theme as chakraTheme } from "@chakra-ui/pro-theme";
import { StyleFunctionProps } from '@chakra-ui/theme-tools'

const theme = extendTheme(
  {
    colors: { 
      ...chakraTheme.colors,
      brand: chakraTheme.colors.blue 
    },
    styles: {
      global: (props: StyleFunctionProps) => ({
        body: {
          color: 'default',
          bg: '#FFFFFF',
        },
      }),
    },
    components: {
      Button: {
        // 1. We can update the base styles
        /* baseStyle: {
          fontWeight: 'bold', // Normally, it is "semibold"
        }, */
        // 2. We can add a new button size or extend existing
        /* sizes: {
          xl: {
            h: '56px',
            fontSize: 'lg',
            px: '32px',
          },
        }, */
        // 3. We can add a new visual variant
        variants: {
          /* 'with-shadow': {
            bg: 'red.400',
            boxShadow: '0 0 2px 2px #efdfde',
          }, */
          // 4. We can override existing variants
          outline: {
            width: "140px",
            borderColor: "#2962FF",
            color: "#2962FF",
            _hover: {
              borderColor: "#0634B5",
              color: "#0634B5"
            }
          },
          /* primary: (props: StyleFunctionProps) => ({
            bgColor: props.borderColor === "#2962FF"? 'red.300' : 'red.500',
            color: props.color === "#2962FF"? 'red.300' : 'red.500'
          }), */
          primary:{
            width: "140px",
            bgColor: "#2962FF",
            _hover: {
              bgColor: "#0634B5",
            }
          },
          /* outline: {
            borderColor="#2962FF",
            color="#2962FF"
          } */
          /* (props: StyleFunctionProps) => ({
            bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
          }), */
          // 5. We can add responsive variants
          sm: {
            bg: 'teal.500',
            fontSize: 'md',
          },
        },
        // 6. We can overwrite defaultProps
        defaultProps: {
          /* size: 'lg', */ // default is md
          /* variant: 'sm', */ // default is solid
          // colorScheme: 'green', // default is gray
          _hover: {
            color: "#0634B5",
          }
        },
      },
    },
  },
  chakraTheme
);

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <ChakraProvider theme={theme}>
            <Component {...pageProps} />
        </ChakraProvider>
    )  
}

export default MyApp

[tombohub]

@AoverK if you wrap your code in
```javascript <code here> ```
you'll get syntax highlight:

import { StyleFunctionProps } from '@chakra-ui/theme-tools'

styles: {
      global: (props: StyleFunctionProps) => ({
        body: {
          color: 'default',
          bg: '#FFFFFF',
        },
      }),
    },

import type { AppProps } from 'next/app'
import { Center, ChakraProvider, extendTheme, Spinner } from '@chakra-ui/react'
import { theme as chakraTheme } from "@chakra-ui/pro-theme";
import { StyleFunctionProps } from '@chakra-ui/theme-tools'

const theme = extendTheme(
  {
    colors: { 
      ...chakraTheme.colors,
      brand: chakraTheme.colors.blue 
    },
    styles: {
      global: (props: StyleFunctionProps) => ({
        body: {
          color: 'default',
          bg: '#FFFFFF',
        },
      }),
    },
    components: {
      Button: {
        // 1. We can update the base styles
        /* baseStyle: {
          fontWeight: 'bold', // Normally, it is "semibold"
        }, */
        // 2. We can add a new button size or extend existing
        /* sizes: {
          xl: {
            h: '56px',
            fontSize: 'lg',
            px: '32px',
          },
        }, */
        // 3. We can add a new visual variant
        variants: {
          /* 'with-shadow': {
            bg: 'red.400',
            boxShadow: '0 0 2px 2px #efdfde',
          }, */
          // 4. We can override existing variants
          outline: {
            width: "140px",
            borderColor: "#2962FF",
            color: "#2962FF",
            _hover: {
              borderColor: "#0634B5",
              color: "#0634B5"
            }
          },
          /* primary: (props: StyleFunctionProps) => ({
            bgColor: props.borderColor === "#2962FF"? 'red.300' : 'red.500',
            color: props.color === "#2962FF"? 'red.300' : 'red.500'
          }), */
          primary:{
            width: "140px",
            bgColor: "#2962FF",
            _hover: {
              bgColor: "#0634B5",
            }
          },
          /* outline: {
            borderColor="#2962FF",
            color="#2962FF"
          } */
          /* (props: StyleFunctionProps) => ({
            bg: props.colorMode === 'dark' ? 'red.300' : 'red.500',
          }), */
          // 5. We can add responsive variants
          sm: {
            bg: 'teal.500',
            fontSize: 'md',
          },
        },
        // 6. We can overwrite defaultProps
        defaultProps: {
          /* size: 'lg', */ // default is md
          /* variant: 'sm', */ // default is solid
          // colorScheme: 'green', // default is gray
          _hover: {
            color: "#0634B5",
          }
        },
      },
    },
  },
  chakraTheme
);

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <ChakraProvider theme={theme}>
            <Component {...pageProps} />
        </ChakraProvider>
    )  
}

export default MyApp

[koxon]

Not working for me. I'm stuck in light mode. In incognito mode on my browser I get dark mode...