diff --git a/website/docs/foundations/diamond-contracts.mdx b/website/docs/foundations/diamond-contracts.mdx
index b49c4a81..62cfa100 100644
--- a/website/docs/foundations/diamond-contracts.mdx
+++ b/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.
-
+
A Diamond lets you:
diff --git a/website/src/components/index.js b/website/src/components/index.js
index 836b11ad..77fae7c1 100644
--- a/website/src/components/index.js
+++ b/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';
+
diff --git a/website/src/components/theme/SvgThemeRenderer/index.js b/website/src/components/theme/SvgThemeRenderer/index.js
new file mode 100644
index 00000000..92db5ea4
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/website/static/img/svg/diamond-diagram-dark.svg b/website/static/img/svg/diamond-diagram-dark.svg
new file mode 100644
index 00000000..a09951b0
--- /dev/null
+++ b/website/static/img/svg/diamond-diagram-dark.svg
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/website/static/img/svg/diamond-diagram-light.svg b/website/static/img/svg/diamond-diagram-light.svg
new file mode 100644
index 00000000..51060505
--- /dev/null
+++ b/website/static/img/svg/diamond-diagram-light.svg
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file