Themed images (#24)

* adding class styles and preview src

* add callout to adoc

* Update preview-src/index.adoc

Co-authored-by: Eric Schneider <[email protected]>

* Update preview-src/index.adoc

Co-authored-by: Eric Schneider <[email protected]>

---------

Co-authored-by: Eric Schneider <[email protected]>

Author: colegoldsmith

preview-src/dark-mode-illustration.png

@@ -927,6 +927,53 @@ public static JavaArchive createDeployment() {
 
 == Images
 
+=== Images for Light and Dark modes
+
+[source,adoc]
+----
+[.for-light]
+image::your-light-image.png[Description]
+[.for-dark]
+image::your-dark-image.png[Description]
+
+// You can also define the role within the macro itself
+
+image::light-mode-illustration.png[Description,role=for-light]
+image::dark-mode-illustration.png[Description,role=for-dark]
+----
+
+[.for-light]
+image::light-mode-illustration.png[Description,400]
+[.for-dark]
+image::dark-mode-illustration.png[Description,400]
+
+=== SVG with CSS variables for Light and Dark modes
+
+.Currently unsupported
+[WARNING]
+====
+The method described below for embedding an SVG directly into the HTML won't work until Antora adds support for the `opts=inline` option (see https://gitlab.com/antora/antora/-/issues/1001).
+Therefore, unless a suitable workaround is discovered, we can't support SVGs with CSS variables until Antora fixes this issue.
+====
+
+[source,svg]
+----
+<svg viewBox="0 0 300 200" fill="none">
+  <path fill="var(--ds-text-primary)" d="..." />
+  <path stroke="var(--ds-primary-outlined-border)" d="..." />
+  <path fill="var(--ds-neutral-outlined-border)" d="..." />
+</svg>
+----
+
+[source,adoc]
+----
+image::your-diagram.svg[Description,300,opts=inline] <1>
+----
+
+<1> The `opts=inline` attribute is required to embed the SVG directly into the HTML.
+
+image::preview-src/simple-diagram.svg[Simple Diagram,192,opts=inline]
+
 === Inline images
 
 Click image:play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.

preview-src/index.adoc

@@ -143,8 +143,16 @@ html[data-theme="dark"] {
   @include dark-theme;
 }
 
+html[data-theme="dark"] .for-light {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) {
     @include dark-theme;
   }
+
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .for-light {
+    display: none;
+  }
 }

preview-src/light-mode-illustration.png

@@ -143,8 +143,16 @@ html[data-theme="light"] {
   @include light-theme;
 }
 
+html[data-theme="light"] .for-dark {
+  display: none;
+}
+
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) {
     @include light-theme;
   }
+
+  :root:not([data-theme="light"]):not([data-theme="dark"]) .for-dark {
+    display: none;
+  }
 }