ChakraUI useColorModeValue not updating main box color

Question

New to react and playing around with ChakraUI. I'm using their useColorModeValue property on my main <Box> container. Though, it's not actually changing it's color, the toggle works fine for everything else, just not this box.

import {
  ChakraProvider,
  Box,
  Text,
  Link,
  VStack,
  Grid,
  Theme,
  useColorModeValue,
} from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider theme={theme}>
        <Box minH='100vh' bg={useColorModeValue('brand.500', 'teal')}>
            <Test />
            <Hero />
        </Box>
    </ChakraProvider>
  );
}

Am I missing something here?

Answer 1

useColorModeValue is a hook and as per the React documentation;

Always use Hooks at the top level of your React function, before any early returns. Ref.

E.G

export default function Foo() {
  const bg = useColorModeValue('brand.500', 'teal')
  return (<Box bg={bg} />)
}

However, you will actually need to move your Chakra provider up one level so that you can do this;

export default function Application() {
  return (
    <ChakraProvider theme={theme}>
      <Foo />
    </ChakraProvider>
  )
}