Docs: Fix Bug

Theme Enabled svg on the main page did not display
correctly on firefox. Use React Native code to show
this svg instead of html native code

docs/src/css/custom.css

@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: #2b743d;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;

docs/src/pages/index.js

@@ -5,20 +5,27 @@ import Layout from '@theme/Layout';
 
 import styles from './index.module.css';
 
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+
+
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
         <h1 className="hero__title">{siteConfig.title}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-
         <p align="center">
-  <picture align="center">
-    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/88637659/213171745-7acf07df-6578-4a50-a106-1a7b368f8d6c.svg"/>
-    <img alt="Shows a bar chart with benchmark results." src="https://user-images.githubusercontent.com/88637659/213173736-6e91724c-8de1-4568-9d52-297b4b5ff0d2.svg" />
-  </picture>
-</p>
+        <ThemedImage
+          alt="Docusaurus themed image"
+          sources={{
+            light: useBaseUrl('https://user-images.githubusercontent.com/88637659/213171745-7acf07df-6578-4a50-a106-1a7b368f8d6c.svg'),
+            dark: useBaseUrl('https://user-images.githubusercontent.com/88637659/213173736-6e91724c-8de1-4568-9d52-297b4b5ff0d2.svg'),
+          }}
+        />;
+        </p>
       </div>
     </header>
   );