Merge pull request #1042 from multiversx/dynamic-theme-image-support

Themed Images

docs/utils.mdx

@@ -5,6 +5,8 @@ title: Markdown Examples
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from "@theme/ThemedImage";
 
 ## Base Syntax
 
@@ -265,21 +267,46 @@ $$
 |x| = \begin{Bmatrix} x  & {if } x \geq 0 \\ -x & {if } x < 0 \end{Bmatrix}
 $$
 
-### YouTube Embed
+## Themed Images
 
-## First Version
+### First Version
+
+Image path should include `#gh-light-mode-only` for the Light Theme and `#gh-dark-mode-only` for the Dark Theme
+
+![Docusaurus themed image](/img/logo.svg#gh-light-mode-only)![Docusaurus themed image](/img/logo_dark.svg#gh-dark-mode-only)
+
+### Second Version
+
+Must Include
+
+```jsx
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ThemedImage from "@theme/ThemedImage";
+```
+
+<ThemedImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("/img/logo.svg"),
+    dark: useBaseUrl("/img/logo_dark.svg"),
+  }}
+/>
+
+## YouTube Embed
+
+### First Version
 
 [![Blockchain basics](https://img.youtube.com/vi/tv6OBimIX98/maxresdefault.jpg)](https://www.youtube.com/watch?v=tv6OBimIX98 "Blockchain basics")
 
-## Second version
+### Second version
 
 <iframe
-    width="560"
-    height="315"
-    src="https://www.youtube-nocookie.com/embed/tv6OBimIX98?playlist=tv6OBimIX98"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen
+  width="560"
+  height="315"
+  src="https://www.youtube-nocookie.com/embed/tv6OBimIX98?playlist=tv6OBimIX98"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
 ></iframe>
 
 ## Mermaid diagrams

src/css/custom.css

@@ -621,3 +621,12 @@ table > tfoot:not(:last-child) {
 }
 
 /* -------------------- End Mermaid ------------------- */
+
+/* ------------------- Start Dynamic Theme Support ------------------- */
+
+[data-theme="light"] img[src$="#gh-dark-mode-only"],
+[data-theme="dark"] img[src$="#gh-light-mode-only"] {
+  display: none;
+}
+
+/* -------------------- End Dynamic Theme Support ------------------- */