Add dark screenshot to docs welcome page

docsSite/docs/index.mdx

@@ -4,9 +4,11 @@ title: Welcome
 slug: /
 ---
 
-# AdvantageScope
-
 import DocCardList from "@theme/DocCardList";
+import ScreenshotLight from "./img/screenshot-light.png";
+import ScreenshotDark from "./img/screenshot-dark.png";
+
+# AdvantageScope
 
 AdvantageScope is a robot diagnostics, log review/analysis, and data visualization application for FIRST Robotics Competition teams. It reads logs in WPILOG, DS log, Hoot (CTRE), and RLOG file formats, plus live robot data viewing using NT4 or RLOG streaming. AdvantageScope can be used with any WPILib project, but is also optimized for use with our [AdvantageKit](https://github.com/Mechanical-Advantage/AdvantageKit) log replay framework. Note that **AdvantageKit is not required to use AdvantageScope**.
 
@@ -50,6 +52,7 @@ AdvantageScope includes the following tools:
   style={{ marginBottom: "15px" }}
 />
 
-![Example screenshot](./img/screenshot-light.png)
-
 Feedback, feature requests, and bug reports are welcome on the [issues page](https://github.com/Mechanical-Advantage/AdvantageScope/issues). For non-public inquires, please send a message to software@team6328.org.
+
+<img src={ScreenshotLight} class="light-only" />
+<img src={ScreenshotDark} class="dark-only" />

docsSite/src/css/custom.css

@@ -38,3 +38,25 @@
 .pagination-nav__link--next .pagination-nav__label:after {
   content: "  \25B6";
 }
+
+img {
+  margin-bottom: 15px;
+}
+
+.light-only {
+  display: initial;
+}
+
+.dark-only {
+  display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .light-only {
+    display: none;
+  }
+
+  .dark-only {
+    display: initial;
+  }
+}