diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 51d2992..932b6ed 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -23,11 +23,6 @@
   --ifm-code-font-size: 95%;
 }
 
-.hero--primary {
-  --ifm-hero-background-color: #8ecce7;
-  color: #1a2c5b;
-}
-
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-color-primary: #8ecce7;
@@ -42,9 +37,4 @@
   --ifm-breadcrumb-item-background-active: #1a2c5b;
   --ifm-breadcrumb-color-active: #8ecce7;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-
-  .hero--primary {
-    --ifm-hero-background-color: #1a2c5b;
-    color: #8ecce7;
-  }
 }
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 128a3d1..ebdfae2 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,3 +1,4 @@
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
@@ -9,13 +10,23 @@ import styles from './index.module.css';
 
 function HomepageHeader() {
   const { colorMode } = useColorMode();
+  const [isMounted, setIsMounted] = useState(false);
+
   const LogoSvg = colorMode === 'dark'
-        ? require('@site/static/img/logo-with-name-and-tagline-dark.svg').default
-        : require('@site/static/img/logo-with-name-and-tagline.svg').default;
+      ? require('@site/static/img/logo-with-name-and-tagline-dark.svg').default
+      : require('@site/static/img/logo-with-name-and-tagline.svg').default;
+
+  useEffect(() => {
+      setIsMounted(true); // Set mounted flag to true after the initial render
+  }, []);
+
+  if (!isMounted) {
+      return null; // Return null until colorMode is loaded
+  }
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-          <LogoSvg className={styles.logoSvg} role="img"></LogoSvg>
+          <LogoSvg id={colorMode} className={styles.logoSvg} role="img"></LogoSvg>
       </div>
     </header>
   );
diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
index 3c4ecec..148a69a 100644
--- a/docs/src/pages/index.module.css
+++ b/docs/src/pages/index.module.css
@@ -8,6 +8,7 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+    background-color: var(--ifm-color-primary-light);
 }
 
 @media screen and (max-width: 996px) {