feat: support dark mode

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
 

components/ImageAndText.js

@@ -40,8 +40,8 @@ export default function ImageAndText({
               </div>
             </div>
 
-            <div className="p-6 bg-grey">
+            <div className="p-6 bg-grey dark:bg-[#222222]">
-              <div className="leading-relaxed">
+              <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>

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={