feat: redo how images, icons, and logos are handled

src/components/images/ImageTheme.astro

@@ -0,0 +1,46 @@
+---
+import { Image } from 'astro:assets';
+
+const { srcLight, srcDark, alt, style, width, height } = Astro.props;
+---
+
+<div class="themed-image-container">
+  <Image
+    src={srcLight}
+    alt={alt}
+    class={`light-logo ${style}`}
+    inferSize={true}
+    width={width}
+    height={height}
+    inferSize={true}
+  />
+
+  <Image
+    src={srcDark}
+    alt={alt}
+    class={`dark-logo ${style}`}
+    inferSize={true}
+    width={width}
+    height={height}
+    inferSize={true}
+  />
+</div>
+
+<style>
+  .themed-image-container {
+    display: grid;
+    grid-template-areas: "stack";
+  }
+
+  .themed-image-container :global(img) {
+    grid-area: stack;
+  }
+
+  :global(.dark) .light-logo {
+    display: none !important;
+  }
+
+  :global(.dark) .dark-logo {
+    display: block !important;
+  }
+</style>