Adding dianegative versions of project logos

Author: erikvansebille

public/projects/plasticparcelslogo_dia.png

@@ -1,7 +1,15 @@
-import { Image, Link } from '@/components/mdx'
+import { Link } from '@/components/mdx'
 import { Box, Card, CardBody, Stack, Text } from '@chakra-ui/react'
+import { ColorModeImage } from '@/components/ColorModeImage'
 
-export const ProjectCard = ({ name, description, repo, homepage, logo }) => {
+export const ProjectCard = ({
+  name,
+  description,
+  repo,
+  homepage,
+  logo_light,
+  logo_dark,
+}) => {
   return (
     <Card
       as={Link}
@@ -27,10 +35,11 @@ export const ProjectCard = ({ name, description, repo, homepage, logo }) => {
           gap={0}
         >
           <Box>
-            <Image
+            <ColorModeImage
               h={'128'}
               w={'full'}
-              src={logo}
+              lightSrc={logo_light}
+              darkSrc={logo_dark}
               alt={name}
               layout='fill'
               objectFit='contain'

public/projects/virtual_ship_logo_dia.png

@@ -30,7 +30,8 @@ export const Projects = () => {
               <ProjectCard
                 key={index}
                 name={project.name}
-                logo={project.logo}
+                logo_light={project.logo_light}
+                logo_dark={project.logo_dark}
                 description={project.description}
                 repo={project.repo}
                 homepage={project.homepage}

public/projects/virtualfleet_logo_dia.png

@@ -5,15 +5,17 @@ export const Projects = [
       'PlasticParcels is a Python package to simulate the transport and dispersion of plastics in the ocean.',
     repo: 'https://github.com/OceanParcels/plasticparcels',
     homepage: 'https://plastic.oceanparcels.org/en/latest/',
-    logo: '/projects/plasticparcelslogo.png',
+    logo_light: '/projects/plasticparcelslogo.png',
+    logo_dark: '/projects/plasticparcelslogo_dia.png',
   },
   {
     name: 'VirtualShip Parcels',
     description:
       'VirtualShipParcels is a command-line simulator to plan and conduct a virtual research expedition.',
     repo: 'https://github.com/OceanParcels/virtualship',
     homepage: 'https://virtualship.oceanparcels.org/en/latest/',
-    logo: '/projects/virtual_ship_logo.png',
+    logo_light: '/projects/virtual_ship_logo.png',
+    logo_dark: '/projects/virtual_ship_logo_dia.png',
   },
   // {
   //   // TODO fix planktondrift website
@@ -28,6 +30,7 @@ export const Projects = [
     description:
       'Virtual Fleet is a Python tool that simulates Argo floats trajectories and measurement.',
     homepage: 'https://github.com/euroargodev/VirtualFleet',
-    logo: '/projects/virtualfleet_logo.png',
+    logo_light: '/projects/virtualfleet_logo.png',
+    logo_dark: '/projects/virtualfleet_logo_dia.png',
   },
 ]