Add dark mode support

src/components/ColorModeImage.js

@@ -0,0 +1,8 @@
+// So that we can easily use different images for light and dark mode
+import { Image, useColorModeValue } from '@chakra-ui/react'
+
+export function ColorModeImage({ lightSrc, darkSrc, alt, ...props }) {
+  const src = useColorModeValue(lightSrc, darkSrc)
+
+  return <Image src={src} alt={alt} {...props} />
+}

src/components/ColorModeToggle.js

@@ -0,0 +1,20 @@
+import { IconButton, useColorMode } from '@chakra-ui/react'
+import { SunIcon, MoonIcon } from '@chakra-ui/icons'
+
+export function ColorModeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  return (
+    <IconButton
+      aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+      icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+      onClick={toggleColorMode}
+      variant='ghost'
+      size='md'
+      position='fixed'
+      top={4}
+      right={4}
+      zIndex={1000}
+    />
+  )
+}

src/components/footer.js

@@ -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>

src/components/funders.js

@@ -8,6 +8,7 @@ import {
   GridItem,
   Tooltip,
 } from '@chakra-ui/react'
+import { ColorModeImage } from '@/components/ColorModeImage'
 import React from 'react'
 import { Funders as data } from '@/data/funders'
 
@@ -47,7 +48,12 @@ export const Funders = () => {
                   }
                   pr={4}
                 >
-                  <Image maxH={20} src={funder.logo} alt={funder.name} />
+                  <ColorModeImage
+                    lightSrc={funder.logo_light}
+                    darkSrc={funder.logo_dark}
+                    maxH={20}
+                    alt={funder.name}
+                  />
                 </GridItem>
               </Tooltip>
             ))}

src/components/header.js

@@ -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/project-card.js

@@ -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'

src/components/projects.js

@@ -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}

src/data/funders.js

@@ -1,27 +1,32 @@
 export const Funders = [
   {
     name: 'The Dutch Research Council (NWO)',
-    logo: '/funders-logos/NWOlogo.png',
+    logo_light: '/funders-logos/NWOlogo.png',
+    logo_dark: '/funders-logos/NWOlogo_dia.png',
     url: 'https://www.nwo.nl/en',
   },
   {
     name: 'The European Research Council under the H2020 Starting Grant TOPIOS project (grant agreement No 715386).',
-    logo: '/funders-logos/ERClogo.png',
+    logo_light: '/funders-logos/ERClogo.png',
+    logo_dark: '/funders-logos/ERClogo_dia.png',
     url: 'http://topios.org/',
   },
   {
     name: 'ESPRC',
-    logo: '/funders-logos/EPSRlogo.png',
+    logo_light: '/funders-logos/EPSRlogo.png',
+    logo_dark: '/funders-logos/EPSRlogo_dia.png',
     url: 'https://www.ukri.org/councils/epsrc/',
   },
   {
     name: 'BMBF via the Warmworld project',
-    logo: '/funders-logos/BMBFlogo.png',
+    logo_light: '/funders-logos/BMBFlogo.png',
+    logo_dark: '/funders-logos/BMBFlogo_dia.png',
     url: 'https://www.warmworld.de',
   },
   {
     name: 'Utrecht University',
-    logo: '/funders-logos/UUlogo.png',
+    logo_light: '/funders-logos/UUlogo.png',
+    logo_dark: '/funders-logos/UUlogo_dia.png',
     url: 'https://www.uu.nl/en',
   },
 ]

src/data/projects.js

@@ -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',
   },
 ]

src/pages/_app.js

@@ -4,6 +4,7 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
+import { ColorModeToggle } from '@/components/ColorModeToggle'
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
@@ -41,6 +42,7 @@ function MyApp({ Component, pageProps }) {
         }}
       />
 
+      <ColorModeToggle />
       <Component {...pageProps} />
     </ChakraProvider>
   )

src/pages/cards/[id].js

@@ -12,6 +12,7 @@ import {
   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 +29,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>

src/theme.js

@@ -4,6 +4,7 @@ import '@fontsource-variable/inter'
 
 // color mode config
 const config = {
+  // TODO: Change default color mode to system?
   initialColorMode: 'light',
   useSystemColorMode: false,
 }