Updating colour scheme of the website

erikvansebille · erikvansebille · commit c9aa1eeaaec3 · 2026-06-02T17:42:56.000+02:00
diff --git a/public/funders-logos/NIOZlogo-dark.png b/public/funders-logos/NIOZlogo-dark.png
diff --git a/public/funders-logos/NKOlogo-dark.png b/public/funders-logos/NKOlogo-dark.png
diff --git a/public/projects/UB-edusources-logo.png b/public/projects/UB-edusources-logo.png
diff --git a/src/components/desktop-nav.js b/src/components/desktop-nav.js
@@ -27,12 +27,11 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 whiteSpace={'nowrap'}
                 flexShrink={0}
-                color={useColorModeValue('gray.600', 'gray.200')}
+                color='black'
                 textDecoration='none'
                 _hover={{
                   textDecoration: 'none',
-                  // eslint-disable-next-line react-hooks/rules-of-hooks
-                  color: useColorModeValue('gray.800', 'white'),
+                  color: 'black',
                 }}
               >
                 {navItem.label}
diff --git a/src/components/features.js b/src/components/features.js
@@ -16,8 +16,8 @@ import { CheckIcon } from '@chakra-ui/icons'
 export const Features = () => {
   const features = React.useMemo(() => data, [])
   return (
-    <Box id={'features'} as='section'>
-      <Container maxW='container.lg' pt={0} centerContent>
+    <Box id={'features'} as='section' bg='white' color='black'>
+      <Container maxW='container.lg' pt={6} centerContent>
         <Heading as='h1' size='2xl' mt={6}>
           Key Features & Capabilities
         </Heading>
diff --git a/src/components/findus.js b/src/components/findus.js
@@ -17,12 +17,8 @@ import { Heading } from '@/components/mdx'
 export const FindUs = () => {
   const findus = React.useMemo(() => data, [])
   return (
-    <Box id={'findus'} as='section'>
-      <Container maxW='container.lg' py={0} centerContent>
-        <Heading as='h1' size='2xl'>
-          Find us on
-        </Heading>
-
+    <Box id={'findus'} as='section' bg='#758BFD' color='white'>
+      <Container maxW='container.lg' mt={0} mb={0} pt={6} centerContent>
         <Box my={8}>
           <Grid
             templateColumns={`repeat(${findus.length}, minmax(auto, max-content))`}
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -48,11 +48,7 @@ const ListHeader = ({ children }) => {
 
 export const Footer = () => {
   return (
-    <Box
-      bg={useColorModeValue('gray.50', 'gray.900')}
-      color={useColorModeValue('gray.700', 'gray.200')}
-      as='footer'
-    >
+    <Box bg='#FFCD00' color='black' as='footer'>
       <Container maxW='container.lg' my={8} centerContent>
         <SimpleGrid
           columns={{ base: 1, sm: 2, md: 3 }}
@@ -82,8 +78,9 @@ export const Footer = () => {
                   key={item.label}
                   href={item.href}
                   fontSize={'sm'}
+                  color='black'
                   textDecoration='none'
-                  _hover={{ color: 'blue.500', textDecoration: 'none' }}
+                  _hover={{ color: 'black', textDecoration: 'none' }}
                 >
                   {item.label}
                 </Link>
@@ -98,8 +95,9 @@ export const Footer = () => {
                   key={item.label}
                   href={item.href}
                   fontSize={'sm'}
+                  color='black'
                   textDecoration='none'
-                  _hover={{ color: 'blue.500', textDecoration: 'none' }}
+                  _hover={{ color: 'black', textDecoration: 'none' }}
                 >
                   {item.label}
                 </Link>
diff --git a/src/components/funders.js b/src/components/funders.js
@@ -17,9 +17,9 @@ import { Heading } from '@/components/mdx'
 export const Funders = () => {
   const funders = React.useMemo(() => data, [])
   return (
-    <Box id={'funders'} as='section'>
+    <Box id={'funders'} as='section' bg='#27187E' color='white'>
       <Container maxW='container.lg' centerContent>
-        <Heading as='h1' size='2xl'>
+        <Heading as='h1' size='2xl' mt={6} mb={0}>
           Funders
         </Heading>
 
diff --git a/src/components/getstarted.js b/src/components/getstarted.js
@@ -143,9 +143,11 @@ export const GetStarted = () => {
     <Box
       id={'getstarted'}
       as='section'
-      bg='blue.50'
+      bg='#AEB8FE'
       _dark={{ bg: 'blue.900' }}
-      mb={6}
+      mb={0}
+      pt={6}
+      pb={12}
     >
       <Container maxW='container.lg' centerContent>
         <Heading as='h1' size='2xl' mt={6}>
@@ -162,9 +164,9 @@ export const GetStarted = () => {
             {getstarted.map((item, index) => (
               <Button
                 key={index}
-                bg='blue.400'
+                bg='#27187E'
                 color='white'
-                _hover={{ bg: 'blue.700' }}
+                _hover={{ bg: '#27187E' }}
                 borderRadius='md'
                 width='100%'
                 height='64px'
diff --git a/src/components/header.js b/src/components/header.js
@@ -11,7 +11,6 @@ import {
   Image,
   Stack,
   useColorMode,
-  useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react'
 import { ColorModeImage } from '@/components/ColorModeImage'
@@ -34,12 +33,10 @@ export const Header = () => {
         boxShadow={'sm'}
         zIndex={'999'}
         justify={'center'}
+        color='black'
         css={{
           backdropFilter: 'saturate(180%) blur(5px)',
-          backgroundColor: useColorModeValue(
-            'rgba(255, 255, 255, 0.8)',
-            'rgba(26, 32, 44, 0.8)',
-          ),
+          backgroundColor: '#FFCD00',
         }}
       >
         <Container as={Flex} maxW={'container.lg'} align={'center'}>
@@ -60,6 +57,7 @@ export const Header = () => {
               }
               variant={'ghost'}
               size={'sm'}
+              color='black'
               aria-label={'Toggle Navigation'}
             />
           </Flex>
@@ -101,6 +99,7 @@ export const Header = () => {
               onClick={toggleColorMode}
               variant={'ghost'}
               size={'sm'}
+              color='black'
             />
           </Stack>
         </Container>
diff --git a/src/components/hero-banner.js b/src/components/hero-banner.js
@@ -4,8 +4,8 @@ import { Image, Link } from '@/components/mdx'
 
 export const HeroBanner = () => {
   return (
-    <Box id='header' as='section'>
-      <Container maxW='container.lg' pt={24} centerContent mb={6}>
+    <Box id='header' as='section' bg='#FFFFFF'>
+      <Container maxW='container.lg' pt={24} centerContent mb={0} pb={12}>
         <Stack
           align={'center'}
           spacing={{ base: 8, md: 10 }}
@@ -34,7 +34,7 @@ export const HeroBanner = () => {
                 VirtualShip
               </Text>
               <br />
-              <Text as={'span'} color={'blue.400'}>
+              <Text as={'span'} color={'#758BFD'}>
                 Explore the ocean with a virtual research vessel
               </Text>
             </Heading>
diff --git a/src/components/mobile-nav.js b/src/components/mobile-nav.js
@@ -34,11 +34,7 @@ const MobileNavItem = ({ href, children, label }) => {
           textDecoration: 'none',
         }}
       >
-        <Text
-          fontWeight={600}
-          whiteSpace={'nowrap'}
-          color={useColorModeValue('gray.600', 'gray.200')}
-        >
+        <Text fontWeight={600} whiteSpace={'nowrap'} color='black'>
           {label}
         </Text>
         {children && (
@@ -69,6 +65,7 @@ const MobileNavItem = ({ href, children, label }) => {
                 key={index}
                 href={child.href ?? '#'}
                 py={2}
+                color='black'
                 textDecoration='none'
               >
                 {child.label}
diff --git a/src/components/video-demo.js b/src/components/video-demo.js
@@ -4,7 +4,16 @@ import React from 'react'
 
 export const VideoDemo = () => {
   return (
-    <Box id={'video-demo'} as='section' my={12}>
+    <Box
+      id={'video-demo'}
+      as='section'
+      mt={0}
+      mb={0}
+      pb={12}
+      pt={12}
+      bg='#758BFD'
+      color='white'
+    >
       <Container maxW='container.lg' pt={0} centerContent>
         <Box
           w='100%'
diff --git a/src/data/findus.js b/src/data/findus.js
@@ -7,13 +7,13 @@ export const FindUs = [
   },
   {
     name: 'GitHub',
-    logo_light: '/projects/GitHub_Lockup_Black.png',
+    logo_light: '/projects/GitHub_Lockup_White.png',
     logo_dark: '/projects/GitHub_Lockup_White.png',
     url: 'https://github.com/Parcels-code/virtualship',
   },
   {
     name: 'YouTube',
-    logo_light: '/projects/yt_logo_fullcolor_almostblack_digital.png',
+    logo_light: '/projects/yt_logo_fullcolor_white_digital.png',
     logo_dark: '/projects/yt_logo_fullcolor_white_digital.png',
     url: 'https://www.youtube.com/@VirtualShipClassroom',
   },
diff --git a/src/data/funders.js b/src/data/funders.js
@@ -1,19 +1,19 @@
 export const Funders = [
   {
     name: 'Utrecht University',
-    logo_light: '/funders-logos/UUlogo.png',
+    logo_light: '/funders-logos/UUlogo_dia.png',
     logo_dark: '/funders-logos/UUlogo_dia.png',
     url: 'https://www.uu.nl/en',
   },
   {
     name: 'NIOZ',
-    logo_light: '/funders-logos/NIOZlogo.png',
+    logo_light: '/funders-logos/NIOZlogo-dark.png',
     logo_dark: '/funders-logos/NIOZlogo.png',
     url: 'https://www.nioz.nl/en',
   },
   {
     name: 'Nationaal Kennisinstituut Onderwijs',
-    logo_light: '/funders-logos/NKOlogo.png',
+    logo_light: '/funders-logos/NKOlogo-dark.png',
     logo_dark: '/funders-logos/NKOlogo.png',
     url: 'https://www.nko.nl/en',
   },
