pull color mode hooks from render

Author: ACHultman

src/components/Contact/index.tsx

@@ -34,16 +34,20 @@ const CONFETTI_DARK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
 function Contact() {
     const { hasCopied, onCopy } = useClipboard(process.env.NEXT_PUBLIC_EMAIL);
 
+    const bgColor = useColorModeValue('white', 'gray.800');
+    const bgImage = useColorModeValue(CONFETTI_LIGHT, CONFETTI_DARK);
+    const btnHoverColor = useColorModeValue('white', 'gray.700');
+
+    const formBg = useColorModeValue('white', 'gray.700');
+    const formColor = useColorModeValue('gray.700', 'whiteAlpha.900');
+
     return (
         <Flex
-            bg={useColorModeValue('white', 'gray.800')}
+            bg={bgColor}
             align="center"
             justify="center"
             css={{
-                backgroundImage: useColorModeValue(
-                    CONFETTI_LIGHT,
-                    CONFETTI_DARK
-                ),
+                backgroundImage: bgImage,
                 backgroundAttachment: 'fixed',
             }}
         >
@@ -88,11 +92,8 @@ function Contact() {
                                         fontSize="3xl"
                                         icon={<MdEmail />}
                                         _hover={{
-                                            bg: 'blue.500',
-                                            color: useColorModeValue(
-                                                'white',
-                                                'gray.700'
-                                            ),
+                                            bg: 'green.500',
+                                            color: btnHoverColor,
                                         }}
                                         onClick={onCopy}
                                         isRound
@@ -107,11 +108,8 @@ function Contact() {
                                         fontSize="3xl"
                                         icon={<BsGithub />}
                                         _hover={{
-                                            bg: 'blue.500',
-                                            color: useColorModeValue(
-                                                'white',
-                                                'gray.700'
-                                            ),
+                                            bg: 'black',
+                                            color: btnHoverColor,
                                         }}
                                         isRound
                                     />
@@ -125,24 +123,18 @@ function Contact() {
                                         icon={<BsLinkedin size="28px" />}
                                         _hover={{
                                             bg: 'blue.500',
-                                            color: useColorModeValue(
-                                                'white',
-                                                'gray.700'
-                                            ),
+                                            color: btnHoverColor,
                                         }}
                                         isRound
                                     />
                                 </ExternalLink>
                             </Stack>
 
                             <Box
-                                bg={useColorModeValue('white', 'gray.700')}
+                                bg={formBg}
                                 borderRadius="lg"
                                 p={8}
-                                color={useColorModeValue(
-                                    'gray.700',
-                                    'whiteAlpha.900'
-                                )}
+                                color={formColor}
                                 shadow="dark-lg"
                             >
                                 <ContactForm />

src/components/Layout/extra/Link.tsx

@@ -5,18 +5,17 @@ import { useRouter } from 'next/router';
 
 function Link({ children, href, ...props }) {
     const { asPath: currentPath } = useRouter();
+    const bgColor = useColorModeValue('gray.100', 'gray.700');
+    const hoverBgColor = useColorModeValue('gray.200', 'gray.700');
 
     return (
         <NextLink href={href} passHref>
             <ChakraLink
                 as="div"
-                bg={
-                    href === currentPath &&
-                    useColorModeValue('gray.100', 'gray.700')
-                }
+                bg={href === currentPath ? bgColor : undefined}
                 _hover={{
                     textDecoration: 'none',
-                    bg: useColorModeValue('gray.200', 'gray.700'),
+                    bg: hoverBgColor,
                 }}
                 p={2}
                 rounded={'md'}