Merge pull request #58 from ecss-soton/fix-header-darkmode

fixed the header

src/app/_components/ThemeImage/index.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 'use client'
 
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { useTheme } from '../../_providers/Theme'
+import { themeLocalStorageKey } from '../../_providers/Theme/shared'
 
 export const ThemeImage: React.FC<{
   src: string
@@ -12,8 +13,25 @@ export const ThemeImage: React.FC<{
   className: string
 }> = ({ src, darksrc, alt, className }) => {
   const { theme } = useTheme()
+  const [logoSrc, setLogoSrc] = useState(src) // Default to light theme image
 
-  const logoSrc = theme === 'dark' ? darksrc : src
+  useEffect(() => {
+    let newTheme
+    if (typeof window !== 'undefined') {
+      // Check if running in the browser
+      if (!theme) {
+        newTheme = window.localStorage.getItem(themeLocalStorageKey)
+      } else {
+        newTheme = theme
+      }
+    } else {
+      // Default to light theme if running on the server
+      newTheme = 'light'
+    }
+
+    const updatedLogoSrc = newTheme === 'dark' ? darksrc : src
+    setLogoSrc(updatedLogoSrc)
+  }, [theme, src, darksrc])
 
   return <img className={className} src={logoSrc} alt={alt} />
 }