Adding diapositive versions of Parcels logos for dark mode

Author: erikvansebille

public/parcels-assets/logo-horo_dia.svg

@@ -10,6 +10,7 @@ import {
   VStack,
 } from '@chakra-ui/react'
 
+import { ColorModeImage } from '@/components/ColorModeImage'
 import { Image, Link } from '@/components/mdx'
 import { footerItems } from '@/data/footer-items'
 
@@ -59,9 +60,10 @@ export const Footer = () => {
         >
           <Stack spacing={6}>
             <Box>
-              <Image
+              <ColorModeImage
                 w={32}
-                src={'/parcels-assets/logo-horo.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
+                lightSrc={'/parcels-assets/logo-horo.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
+                darkSrc={'/parcels-assets/logo-horo_dia.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
                 alt={'parcels logo'}
               />
             </Box>

public/parcels-assets/logo-no-text_dia.svg

@@ -14,6 +14,7 @@ import {
   useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react'
+import { ColorModeImage } from '@/components/ColorModeImage'
 import React from 'react'
 
 export const Header = () => {
@@ -74,9 +75,10 @@ export const Header = () => {
               alignItems={'center'}
               spacing={{ base: 2, sm: 4 }}
             >
-              <Image
+              <ColorModeImage
                 w={48}
-                src={'/parcels-assets/logo-horo.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
+                lightSrc={'/parcels-assets/logo-horo.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
+                darkSrc={'/parcels-assets/logo-horo_dia.svg'} //TODO: Update to svg in roughly 1h*3w (internal) and 1h*2w external (as was before)
                 alt={'parcels logo'}
               />
             </Stack>

src/components/footer.js

@@ -6,12 +6,14 @@ import {
   AvatarGroup,
   Box,
   Container,
+  Image,
   Flex,
   Heading,
   Icon,
   Text,
   VStack,
 } from '@chakra-ui/react'
+import { ColorModeImage } from '@/components/ColorModeImage'
 import fs from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
@@ -28,11 +30,12 @@ const Card = ({ frontmatter, id }) => {
             <Text fontSize='xl' color='gray.700' fontWeight='medium'>
               Parcels / blog
             </Text>
-            <Image
+            <ColorModeImage
               w='150px'
               h='auto'
               objectFit='contain'
-              src='/parcels-assets/logo-no-text.svg'
+              lightSrc='/parcels-assets/logo-no-text.svg'
+              darkSrc='/parcels-assets/logo-no-text-dia.svg'
               alt='Parcels logo'
             />
           </Flex>