Improve Diamond Contract Diagram

website/docs/foundations/diamond-contracts.mdx

@@ -4,7 +4,7 @@ title: Diamond Contracts
 description: "Understand Diamonds from the ground up—facets, storage, delegation, and how Compose uses them."
 ---
 
-import DiamondFacetsSVG from '@site/static/img/svg/compose_diamond_facets.svg'
+import SvgThemeRenderer from '@site/src/components/theme/SvgThemeRenderer';
 
 A **diamond contract** is a smart contract that is made up of multiple parts instead of one large block of code. The diamond exists at **one address** and holds **all of the contract's storage**, but it uses separate smart contracts called **facets** to provide its functionality.
 
@@ -23,7 +23,12 @@ A diamond has:
 
 Below is a diagram showing a diamond with multiple facets.
 
-<DiamondFacetsSVG style={{ maxWidth: '100%', height: 'auto' }} />
+<SvgThemeRenderer
+  lightSrc={"/img/svg/diamond-diagram-light.svg"}
+  darkSrc={"/img/svg/diamond-diagram-dark.svg"}
+  alt="Diagram showing how facets compose into a diamond contract"
+  style={{ maxWidth: '100%', height: 'auto' }}
+/>
 
 A Diamond lets you:
 

website/src/components/index.js

@@ -55,3 +55,6 @@ export { default as NavbarEnhancements } from './navigation/NavbarEnhancements';
 export { default as NavbarGradient } from './navigation/NavbarGradient';
 export { default as GitHubStarButton } from './navigation/GitHubStarButton';
 
+// Theme Components
+export { default as SvgThemeRenderer } from './theme/SvgThemeRenderer';
+

website/src/components/theme/SvgThemeRenderer/index.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useColorMode} from '@docusaurus/theme-common';
+
+/**
+ * SvgThemeRenderer Component
+ *
+ * @param {string} lightSrc - Path to the SVG to display in light mode
+ * @param {string} darkSrc - Path to the SVG to display in dark mode
+ * @param {string} alt - Accessible description for the SVG image
+ * @param {string} className - Optional className for the root element
+ * @param {object} props - Additional img element props (style, loading, etc.)
+ */
+export default function SvgThemeRenderer({
+  lightSrc,
+  darkSrc,
+  alt = '',
+  className,
+  ...props
+}) {
+
+  const {colorMode} = useColorMode();
+
+  const activeSrc =
+    colorMode === 'dark'
+      ? darkSrc || lightSrc
+      : lightSrc || darkSrc;
+
+  if (!activeSrc) {
+    return null;
+  }
+
+  return (
+    <img
+      src={activeSrc}
+      alt={alt}
+      className={clsx(className)}
+      {...props}
+    />
+  );
+}