task(devx): Add image zoom and light/dark mode for tokenomics images

docs/content/about-iota/tokenomics/tokenomics.mdx

@@ -1,9 +1,9 @@
 ---
 title: IOTA Tokenomics
 ---
-
 import Quiz from '@site/src/components/Quiz';
 import {questions} from '../../../site/static/json/about-iota/tokenomics/tokenomics.json';
+import ThemedImage from '@theme/ThemedImage';
 
 The collective ideation that the term tokenomics encompasses includes a wide range of concepts that define the science and behavior of blockchain economies. In basic terms, tokenomics are the financial foundation of blockchains. Much the same way a building with a poor foundation is doomed to fail, a blockchain without a well-researched, extensively planned, and painstakingly implemented token economy eventually crumbles.
 
@@ -32,7 +32,13 @@ The IOTA economy is composed of four core components:
 
 The following flowchart presents the tokenomic flow of IOTA at a high level. Referring back to this chart after you learn concepts in this section should provide additional clarity.
 
-![IOTA Tokenomics flow](/img/about-iota/tokenomics/IOTA-tokenomics-fllow.svg "Flowchart showing the tokenomics structure.")
+<ThemedImage
+    alt='IOTA Tokenomics flow'
+    sources={{
+    light: '/img/about-iota/tokenomics/IOTA-tokenomics-flow.svg',
+    dark:  '/img/about-iota/tokenomics/dark/IOTA-tokenomics-flow.svg',
+    }}
+/>
 
 ## Quizzes
 <Quiz questions={questions} />

docs/site/docusaurus.config.js

@@ -108,6 +108,7 @@ const config = {
         intentionallyNotExported: [],
       },
     ],
+    'plugin-image-zoom'
   ],
   presets: [
     [
@@ -272,6 +273,14 @@ const config = {
         darkTheme: themes.vsDark,
         additionalLanguages: ["rust", "typescript", "solidity"],
       },
+      imageZoom: {
+        selector: '.markdown img',
+        // Optional medium-zoom options
+        // see: https://www.npmjs.com/package/medium-zoom#options
+        options: {
+          background: 'rgba(0, 0, 0, 0.6)',
+        },
+      }
     }),
 };
 

docs/site/package.json

@@ -49,6 +49,7 @@
     "hast-util-is-element": "^1.1.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.7",
+    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "postcss": "^8.4.31",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",