Figure is responsive to light/dark theme

FNNDSC · Sep 29, 2023 · 5d83f98 · 5d83f98
1 parent 84efb3b
commit 5d83f98
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/docs/guide.md b/docs/guide.md
@@ -4,7 +4,17 @@ sidebar_position: 2
 
 # Contributor's Guide
 
-## Architecture
+Reading this page provides background knowledge and will point you in the right direction
+for getting started on hacking at _ChRIS_'s codebases.
+
+
+:::danger
+
+Page is WIP.
+
+:::
+
+## Backend Architecture
 
 As a distributed, "hybrid cloud" application, the backend architecture of _ChRIS_ is complex.
 
@@ -14,7 +24,8 @@ CUBE access to a specific compute resource. _pfcon_ speaks to _pman_, which is a
 [shim](https://en.wikipedia.org/wiki/Shim_(computing)) that translates a job request from _CUBE_
 to a call to the compute resource cluster.
 
-![Architecture Diagram](/img/figures/ChRIS_architecture.svg)
+![Architecture Diagram (light theme)](/img/figures/ChRIS_architecture.svg#gh-light-mode-only)
+![Architecture Diagram (dark theme)](/img/figures/ChRIS_architecture_dark.svg#gh-dark-mode-only)
 
 ## Values and Goals
 

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -49,3 +49,9 @@ h6 {
 .container-of-same-height-cards .card {
   height: 100%;
 }
+
+/* https://docusaurus.io/docs/markdown-features/assets#github-style-themed-images */
+[data-theme='light'] img[src$='#gh-dark-mode-only'],
+[data-theme='dark'] img[src$='#gh-light-mode-only'] {
+  display: none;
+}
diff --git a/static/img/figures/ChRIS_architecture_dark.svg b/static/img/figures/ChRIS_architecture_dark.svg