Add dark mode images to docs

Author: phillipleblanc

spiceaidocs/docs/index.md

@@ -4,6 +4,8 @@ slug: /
 title: Home
 ---
 
+import ThemeBasedImage from '@site/src/components/ThemeBasedImage';
+
 # Spice.ai OSS
 
 ## What is Spice?
@@ -14,19 +16,19 @@ Spice makes it easy to build data-driven and data-intensive applications by stre
 
 The Spice runtime is written in Rust and leverages industry leading technologies like Apache DataFusion, Apache Arrow, Apache Arrow Flight, and DuckDB.
 
-<img width="900" alt="OGP" src="https://github.com/spiceai/docs/assets/80174/74d201f9-a954-450b-a7c7-b73ae11aeede" />
+<ThemeBasedImage width="900" alt="OGP" lightSrc="https://github.com/spiceai/spiceai/assets/80174/f71f227d-d7cd-418c-85b9-5c663a728491" darkSrc="https://github.com/spiceai/spiceai/assets/80174/96b5fcef-a550-4ce8-a74a-83931275e83e" />
 
 ## Why Spice?
 
 Spice makes querying data by SQL across one or more data sources simple and fast. Easily co-locate a managed working set of your data with your application or ML, locally accelerated in-memory with Arrow, with SQLite/DuckDB, or with an attached database like PostgreSQL for high-performance, low-latency queries.
 
 ### Before Spice
 
-<img width="750" alt="Before Spice" src="https://github.com/spiceai/docs/assets/80174/05732e82-6609-4d6b-981f-ff514e93e56f" />
+<ThemeBasedImage width="750" alt="Before Spice" lightSrc="https://github.com/spiceai/spiceai/assets/80174/0550d682-cf3b-4b1b-a3bd-d8b3ad7d8caf" darkSrc="https://github.com/spiceai/spiceai/assets/80174/64a3216e-0bbb-48b0-bf98-72e656d690af" />
 
 ### With Spice
 
-<img width="900" alt="With Spice" src="https://github.com/spiceai/docs/assets/80174/21107db5-ee25-4416-b292-7c08af99cfe6" />
+<ThemeBasedImage width="900" alt="With Spice" lightSrc="https://github.com/spiceai/spiceai/assets/80174/b57514fe-d53d-42de-b8f0-97ae313c5708" darkSrc="https://github.com/spiceai/spiceai/assets/80174/02dbedb4-b209-4d08-bf83-4785a1bf886f" />
 
 ### Example Use-Cases
 

spiceaidocs/src/components/ThemeBasedImage.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {useColorMode} from '@docusaurus/theme-common';
+
+const ThemeBasedImage = ({ width, lightSrc, darkSrc, alt }) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <img width={width} src={colorMode === "dark" ? darkSrc : lightSrc} alt={alt} />
+  );
+};
+
+export default ThemeBasedImage;