Light mode diagrams

Author: rmcdaniel

docs/defining-workflows/workflow-status.md

@@ -24,4 +24,12 @@ WorkflowWaitingStatus
 
 This is the state machine for a workflow status.
 
-[![](https://mermaid.ink/img/pako:eNqVkstuwyAQRX_FmmVlR7Zrx4ZFN6m6rtpFpJYuUCEOigELQ1-W_70kVR9EdpWwYubOmasZGOBZMw4Yekstvxa0MVQmLzlRkT-PF09RklxFa212m1a_rgz3Veze17qeqK-iSTHAbrliQjXT2A0V7flUIAbY336nMndOqVmrQAzXoWXXcjvt9h-mrFDuXGx-sHlmTYWdHSwQT7SaZ46eC2JojGCArXE8BsmNpPsQhn1DAnbLJSeA_ZVRsyNA1OiZjqoHreU3ZrRrtoA3tO195Dr2-0l_ssYbc7PSTlnABTr0ADzAm49StEBZmWVpUeY1qvIihnefXi7qqkBVWZd5drmssmKM4eNgm3qlHD8BErAUGg?type=png)](https://mermaid.live/edit#pako:eNqVkstuwyAQRX_FmmVlR7Zrx4ZFN6m6rtpFpJYuUCEOigELQ1-W_70kVR9EdpWwYubOmasZGOBZMw4Yekstvxa0MVQmLzlRkT-PF09RklxFa212m1a_rgz3Veze17qeqK-iSTHAbrliQjXT2A0V7flUIAbY336nMndOqVmrQAzXoWXXcjvt9h-mrFDuXGx-sHlmTYWdHSwQT7SaZ46eC2JojGCArXE8BsmNpPsQhn1DAnbLJSeA_ZVRsyNA1OiZjqoHreU3ZrRrtoA3tO195Dr2-0l_ssYbc7PSTlnABTr0ADzAm49StEBZmWVpUeY1qvIihnefXi7qqkBVWZd5drmssmKM4eNgm3qlHD8BErAUGg)
+import ThemedImage from '@site/src/components/ThemedImage';
+
+<ThemedImage
+  lightSrc="https://mermaid.ink/img/pako:eNqVk01vhCAQhv-KmWOjG7W6KodetumtSdMeNmnpgRR0SQUMQr-M_72sm37QaLPLieGdZ94MMAM8KcoAQW-IYZecNJqI6CXFMnDr4ewxiKKLYKv0c92q141mLoveuVzbY3lImhU97IZJymUzj10R3p5OeaKH_a53LHNrpVy08kT_OpToWmbm3f7DpOHSnootN7bMbAk3i4154pFWy8yf54IQGs0pIKMtC0EwLcg-hGFfEIPZMcEwILelrCa2NRiwHB3WEXmvlPgitbLNDlBN2t5FtqM___Q7xVkzvVFWGkD5VAHQAG-AsrhaVUmeJHGWp2VVpFkI7-54vSqLrCryMk-T83WRZGMIH5Np7BRXglFulL4-zMY0IuMnPzkbbw?type=png"
+  darkSrc="https://mermaid.ink/img/pako:eNqVkstuwyAQRX_FmmVlR7Zrx4ZFN6m6rtpFpJYuUCEOigELQ1-W_70kVR9EdpWwYubOmasZGOBZMw4Yekstvxa0MVQmLzlRkT-PF09RklxFa212m1a_rgz3Veze17qeqK-iSTHAbrliQjXT2A0V7flUIAbY336nMndOqVmrQAzXoWXXcjvt9h-mrFDuXGx-sHlmTYWdHSwQT7SaZ46eC2JojGCArXE8BsmNpPsQhn1DAnbLJSeA_ZVRsyNA1OiZjqoHreU3ZrRrtoA3tO195Dr2-0l_ssYbc7PSTlnABTr0ADzAm49StEBZmWVpUeY1qvIihnefXi7qqkBVWZd5drmssmKM4eNgm3qlHD8BErAUGg?type=png"
+  lightLink="https://mermaid.live/edit#pako:eNqVk01vhCAQhv-KmWOjG7W6KodetumtSdMeNmnpgRR0SQUMQr-M_72sm37QaLPLieGdZ94MMAM8KcoAQW-IYZecNJqI6CXFMnDr4ewxiKKLYKv0c92q141mLoveuVzbY3lImhU97IZJymUzj10R3p5OeaKH_a53LHNrpVy08kT_OpToWmbm3f7DpOHSnootN7bMbAk3i4154pFWy8yf54IQGs0pIKMtC0EwLcg-hGFfEIPZMcEwILelrCa2NRiwHB3WEXmvlPgitbLNDlBN2t5FtqM___Q7xVkzvVFWGkD5VAHQAG-AsrhaVUmeJHGWp2VVpFkI7-54vSqLrCryMk-T83WRZGMIH5Np7BRXglFulL4-zMY0IuMnPzkbbw"
+  darkLink="https://mermaid.live/edit#pako:eNqVkstuwyAQRX_FmmVlR7Zrx4ZFN6m6rtpFpJYuUCEOigELQ1-W_70kVR9EdpWwYubOmasZGOBZMw4Yekstvxa0MVQmLzlRkT-PF09RklxFa212m1a_rgz3Veze17qeqK-iSTHAbrliQjXT2A0V7flUIAbY336nMndOqVmrQAzXoWXXcjvt9h-mrFDuXGx-sHlmTYWdHSwQT7SaZ46eC2JojGCArXE8BsmNpPsQhn1DAnbLJSeA_ZVRsyNA1OiZjqoHreU3ZrRrtoA3tO195Dr2-0l_ssYbc7PSTlnABTr0ADzAm49StEBZmWVpUeY1qvIihnefXi7qqkBVWZd5drmssmKM4eNgm3qlHD8BErAUGg"
+  alt="Workflow Status State Machine"
+/>

src/components/ThemedImage/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export default function ThemedImage({ lightSrc, darkSrc, alt = '', lightLink, darkLink }) {
+  return (
+    <div className={styles.themedImageWrapper}>
+      <div className={styles.lightImage}>
+        {lightLink ? (
+          <a href={lightLink} target="_blank" rel="noopener noreferrer">
+            <img src={lightSrc} alt={alt} />
+          </a>
+        ) : (
+          <img src={lightSrc} alt={alt} />
+        )}
+      </div>
+      <div className={styles.darkImage}>
+        {darkLink ? (
+          <a href={darkLink} target="_blank" rel="noopener noreferrer">
+            <img src={darkSrc} alt={alt} />
+          </a>
+        ) : (
+          <img src={darkSrc} alt={alt} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ThemedImage/styles.module.css

@@ -0,0 +1,21 @@
+.themedImageWrapper {
+  display: inline-block;
+}
+
+/* Light mode: show light image, hide dark image */
+.lightImage {
+  display: inline-block;
+}
+
+.darkImage {
+  display: none;
+}
+
+/* Dark mode: show dark image, hide light image */
+[data-theme='dark'] .lightImage {
+  display: none;
+}
+
+[data-theme='dark'] .darkImage {
+  display: inline-block;
+}