From be60fe171248d45f799a67fdff896aa5a8c21c47 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 9 Sep 2022 18:00:00 +0100
Subject: [PATCH] feat: support dark mode

---
 README.md                  | 2 +-
 components/ImageAndText.js | 4 ++--
 pages/index.js             | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e00cf82..7feceab 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ This is a component from the [Inviqa](https://inviqa.com) website that I recreat
 
 After attending the [Pro Tailwind theming workshop](), I moved it into a Next.js application and refactored it to use CSS custom properties, and moved the button and corner styles into a custom plugin.
 
-The `flex-basis` styles have also been moved into a separate plugin.
+The `flex-basis` styles have also been moved into a separate plugin, and I've added dark mode support which wasn't in the original version.
 
 ## Themes
 
diff --git a/components/ImageAndText.js b/components/ImageAndText.js
index 24390c9..1542190 100644
--- a/components/ImageAndText.js
+++ b/components/ImageAndText.js
@@ -40,8 +40,8 @@ export default function ImageAndText({
               </div>
             </div>
 
-            <div className="p-6 bg-grey">
-              <div className="leading-relaxed">
+            <div className="p-6 bg-grey dark:bg-[#222222]">
+              <div className="leading-relaxed dark:text-white">
                 <h2 className="text-4xl font-bold leading-tight">{title}</h2>
                 <div className="mt-4 markup">{children}</div>
                 <p>
diff --git a/pages/index.js b/pages/index.js
index 577bdd5..3e916af 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -3,7 +3,7 @@ import ImageAndText from "../components/ImageAndText";
 export default function Home() {
   return (
     <div>
-      <div className="flex flex-col justify-center p-24 min-h-screen bg-white">
+      <div className="flex flex-col justify-center p-24 min-h-screen bg-white dark:bg-[#111111]">
         <ImageAndText
           buttonText={"Explore this event"}
           imageUrl={