Fix blog page font colors

Author: VeckoTheGecko

src/pages/blog/[id].js

@@ -10,6 +10,7 @@ import {
   VStack,
   Wrap,
   WrapItem,
+  useColorMode,
 } from '@chakra-ui/react'
 
 import { ArrowBackIcon } from '@chakra-ui/icons'
@@ -45,7 +46,12 @@ export default function Post({ source, frontmatter, postId }) {
               <Heading as={'h1'} textAlign={'center'} size='xl' my={4}>
                 {frontmatter.title}
               </Heading>
-              <Text fontSize={'sm'} color={'gray.700'}>
+              <Text
+                fontSize={'sm'}
+                color={
+                  useColorMode().colorMode === 'dark' ? 'gray.300' : 'gray.600'
+                }
+              >
                 {formatDate(date)} ({distanceToNow(date)})
               </Text>
 

src/pages/blog/index.js

@@ -11,6 +11,7 @@ import {
   Text,
   useColorModeValue,
   VStack,
+  useColorMode,
 } from '@chakra-ui/react'
 
 import { motion } from 'framer-motion'
@@ -41,7 +42,13 @@ const SinglePost = ({ page }) => {
             {page.title}
           </Link>
 
-          <Text fontSize={'sm'} color={'gray.600'} py={4}>
+          <Text
+            fontSize={'sm'}
+            color={
+              useColorMode().colorMode === 'dark' ? 'gray.300' : 'gray.600'
+            }
+            py={4}
+          >
             {formatDate(date)} ({distanceToNow(date)})
           </Text>