Set background image url by css

Signed-off-by: Joshua Castle <26531652+Kas-tle@users.noreply.github.com>

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",

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 {

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