Color mode transition

[rikusen0335]

As title says, I couldn't finally find a solution.

I found this and tried:

import { ChakraProvider, extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
    body: {
        transitionProperty: 'all',
        transitionDuration: 'normal',
    },
})

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

but it seems not working as I expected.

Please give me an idea about this. Thanks.

[hugobqd]

Hi!
There is no 'body' key in the theme object, it should be written in theme.styles.global like that:

const theme = extendTheme({
  styles: {
    global: {
      body: {
        transitionProperty: "all",
        transitionDuration: "normal",
      },
    },
  },
});

But note that there are already transition-property: background-color & transition-duration: var(--chakra-transition-duration-normal) by default on the body.

[rikusen0335]

Oh, this is exactly what I was looking for.
It looks working now, thank you so much.

[0x33dm]

@hugobqd this is awesome! i wonder where i can see all those tokens? for instance "ultra-slow" or "normal"? where is this set?

I have opened a thread asking for a list with all of them: #8413

[rikusen0335]

@0x33dm
Have you looked for d.ts or typing files? I think tokens should be written in there

[0x33dm]

yeah tokens were not there, i have only next-env.d.ts as i started from the "chakra-ui" example on next.js repo.

I just noticed now tough there is an option to use chakra cli to generate those?

https://chakra-ui.com/docs/styled-system/cli

did you have to generate them yourself, is that right?

[0x33dm]

@rikusen0335 i created an issue explaining my problem here