diff --git a/package.json b/package.json
index d0eb8a8..4e30184 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "dependencies": {
         "@docusaurus/core": "^3.1.1",
         "@docusaurus/preset-classic": "^3.1.1",
-        "@docusaurus/theme-common": "^3.1.1",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-brands-svg-icons": "^6.5.1",
         "@fortawesome/free-regular-svg-icons": "^6.5.1",
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index bbbcd3a..f106104 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,3 +1,11 @@
+:root {
+    --ifm-background-image-url: url('/img/site/split-background-light.png');
+}
+
+[data-theme='dark'] {
+    --ifm-background-image-url: url('/img/site/split-background.png');
+}
+
 .heroBanner {
     background-repeat: no-repeat;
     background-position-x: center;
@@ -9,6 +17,7 @@
     overflow: hidden;
     color: var(--ifm-font-color-base);
     background-color: var(--ifm-background-color);
+    background-image: var(--ifm-background-image-url);
 }
 
 .heroContent {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4f86b2c..4a315fb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,23 +1,17 @@
 import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useColorMode } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
 import Heading from '@theme/Heading';
-import HeroBackground from '@site/static/img/site/split-background.png';
-import HeroBackgroundLight from '@site/static/img/site/split-background-light.png';
 import HeroImage from '@site/static/img/site/geyser.png';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
     const { siteConfig } = useDocusaurusContext();
-    const { colorMode } = useColorMode();
-
-    const backgroundImageUrl = colorMode === 'dark' ? HeroBackground : HeroBackgroundLight;
 
     return (
-        <header className={clsx('hero hero--primary', styles.heroBanner)} style={{backgroundImage: `url(${backgroundImageUrl})`}}>
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className={styles.heroContent}>
                 <img src={HeroImage} alt="Geyser Logo" className={styles.heroImage}/>
                 <img src={HeroImage} alt="Geyser Logo" className={styles.heroImageBackgroundBlur}/>