message: fix: move useColorModeValue hook at top
diff: @@ -11,21 +11,15 @@ import {
  function UseColorMode() {
  const { toggleColorMode } = useColorMode();
  + const text = useColorModeValue('Light', 'Dark');
  + const bg = useColorModeValue('warmGray.50', 'coolGray.800');
  return (
  <Center>
  - <Box
  - p="4"
  - flex="1"
  - bg={useColorModeValue('warmGray.50', 'coolGray.800')}
  - maxW="300"
  - w="100%"
  - mt={10}
  - safeArea
  - >
  + <Box p="4" flex="1" bg={bg} maxW="300" w="100%" mt={10} safeArea>
  <Text fontSize="lg" display="flex" mb={20}>
  The active color mode is{' '}
  <Text bold fontSize="18px">
  - {useColorModeValue('Light', 'Dark')}
  + {text}
  </Text>
  </Text>
  <Button onPress={toggleColorMode} h={10}>
  