Update Background Image

Dynamic background dependant on current theme

pages/index.tsx

@@ -1,8 +1,11 @@
 import type {NextPage} from 'next';
-import Image from "next/image";
+import Image from "next/future/image";
 import NavBar from "../components/navbar";
 import {Footer} from "../components/footer"
 
+import splashDark from "../public/splashDarkFinal.jpg"
+import splashLight from "../public/splashLightFinal.jpg"
+
 const Home: NextPage = () => {
     return (
         <div className="">
@@ -10,15 +13,9 @@ const Home: NextPage = () => {
             
             <main className="">
                 {/* MAIN BANNER SECTION BELOW */}
-                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12 ">
+                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12">
-                    <Image
+                    <div className="dark:block hidden"><Image className="flex-shrink-0 h-full w-auto" src={splashDark}/></div>
-                    className=""
+                    <div className="dark:hidden block"><Image className="flex-shrink-0 h-full w-auto" src={splashLight}/></div>
-                    src="/splashDarkFinal.jpg"
-                    alt="Dark background splash screen"
-                    layout="fill"     
-                    quality="100"
-                    priority
-                    />
                 </div>
                 {/* <div className="w-full mt-8 relat" */}
             </main>

tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  purge: [],
   darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx}",
@@ -25,10 +26,12 @@ module.exports = {
         },
       },
       display: ['dark'],
-      backgroundImage: {
+    },
-        'splashDark': "url('/splashDarkFinal.jpg')",
+  },
-        'splashLight': "url('/splashLightFinal.jpg')",
+  variants: {
-      },
+    extend: { 
+      backgroundImage: ['dark'],
+      display: ['dark'],
     },
   },
   plugins: [