From a80d1e3fc41c2a9690c3b62f8774a234b5cbdaab Mon Sep 17 00:00:00 2001
From: Nick Bland <nisky38@hotmail.com>
Date: Mon, 25 Jul 2022 13:27:08 +1000
Subject: [PATCH] Update Background Image

Dynamic background dependant on current theme
---
 pages/index.tsx    | 17 +++++++----------
 tailwind.config.js | 11 +++++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 6cde354..8250d57 100644
--- a/pages/index.tsx
+++ b/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 ">
-                    <Image
-                    className=""
-                    src="/splashDarkFinal.jpg"
-                    alt="Dark background splash screen"
-                    layout="fill"     
-                    quality="100"
-                    priority
-                    />
+                <div className="container relative min-w-full min-h-screen flex flex-col items-center py-12">
+                    <div className="dark:block hidden"><Image className="flex-shrink-0 h-full w-auto" src={splashDark}/></div>
+                    <div className="dark:hidden block"><Image className="flex-shrink-0 h-full w-auto" src={splashLight}/></div>
                 </div>
                 {/* <div className="w-full mt-8 relat" */}
             </main>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ae6098..e94329d 100644
--- a/tailwind.config.js
+++ b/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: [