diff --git a/preview-src/dark-mode-illustration.png b/preview-src/dark-mode-illustration.png
new file mode 100644
index 00000000..5bf1af49
Binary files /dev/null and b/preview-src/dark-mode-illustration.png differ
diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index a26debc6..fe740716 100644
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -910,6 +910,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]
+----
+
+----
+
+[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.
diff --git a/preview-src/light-mode-illustration.png b/preview-src/light-mode-illustration.png
new file mode 100644
index 00000000..cdd38bad
Binary files /dev/null and b/preview-src/light-mode-illustration.png differ
diff --git a/preview-src/simple-diagram.svg b/preview-src/simple-diagram.svg
new file mode 100644
index 00000000..c79ebb4d
--- /dev/null
+++ b/preview-src/simple-diagram.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/src/css/ds-dark.css b/src/css/ds-dark.css
index 4d3815a1..32ced228 100644
--- a/src/css/ds-dark.css
+++ b/src/css/ds-dark.css
@@ -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;
+ }
}
diff --git a/src/css/ds-light.css b/src/css/ds-light.css
index ad2ff292..d9511cca 100644
--- a/src/css/ds-light.css
+++ b/src/css/ds-light.css
@@ -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;
+ }
}