docs: Add a dark mode variant of some images

9 files changed, 16 insertions, 6 deletions

diff --git a/docs/meson.build b/docs/meson.build
index c7e03410..a29f6578 100644
--- a/docs/meson.build
+++ b/docs/meson.build
@@ -7,7 +7,8 @@ pango_content_files = [
   'pango_bidi.md',
   'pango-name.png',
   'layout.png',
-  'pipeline.png',
+  'pipeline-light.png',
+  'pipeline-dark.png',
   'rects1.png',
   'rects2.png',
   'rects3.png',
@@ -19,7 +20,8 @@ pango_content_files = [
   'align-left-justify.png',
   'align-center-justify.png',
   'align-right-justify.png',
-  'vertical.png',
+  'vertical-light.png',
+  'vertical-dark.png',
   'm-south.png',
   'm-west.png',
   'm-north.png',
diff --git a/docs/pango.toml.in b/docs/pango.toml.in
index 6a52cf32..4c51b9aa 100644
--- a/docs/pango.toml.in
+++ b/docs/pango.toml.in
@@ -67,7 +67,8 @@ content_files = [
 content_images = [
   "pango-name.png",
   "layout.png",
-  "pipeline.png",
+  "pipeline-light.png",
+  "pipeline-dark.png",
   "rects1.png",
   "rects2.png",
   "arabic-markup.png",
@@ -78,7 +79,8 @@ content_images = [
   "align-left-justify.png",
   "align-center-justify.png",
   "align-right-justify.png",
-  "vertical.png",
+  "vertical-light.png",
+  "vertical-dark.png",
   "m-south.png",
   "m-west.png",
   "m-north.png",
diff --git a/docs/pango_bidi.md b/docs/pango_bidi.md
index dcb5ddf1..5d418422 100644
--- a/docs/pango_bidi.md
+++ b/docs/pango_bidi.md
@@ -20,7 +20,10 @@ Pango is not only capable of vertical text layout, it can handle mixed vertical
 and non-vertical text correctly. This section describes the types used for setting
 vertical text parameters.
 
- <img alt="gravity west, rotated 90 degrees" align="right" valign="top" src="vertical.png">
+<picture>
+  <source srcset="vertical-dark.png" media="(prefers-color-scheme: dark)">
+  <img alt="gravity west, rotated 90 degrees" align="right" valign="top" src="vertical-light.png">
+</picture>
 The way this is implemented is through the concept of *gravity*. Gravity tells glyphs which way is down, so the gravity of normal Latin text is south. A gravity value of east means that glyphs will be rotated ninety degrees
 counterclockwise. So, to render vertical text one needs
 to set the gravity and rotate the layout using the matrix machinery already
diff --git a/docs/pango_rendering.md b/docs/pango_rendering.md
index 2fd61e93..9dfddd55 100644
--- a/docs/pango_rendering.md
+++ b/docs/pango_rendering.md
@@ -8,7 +8,10 @@ The Pango rendering pipeline takes a string of Unicode characters, converts them
 it into glyphs, and renders them on some output medium. This section describes the
 various stages of this pipeline and the APIs that implement them.
 
-![Pango Rendering Pipeline](pipeline.png)
+<picture>
+  <source srcset="pipeline-dark.png" media="(prefers-color-scheme: dark)">
+  <img alt="Pango Rendering Pipeline" src="pipeline-light.png">
+</picture>
 
 Itemization
 : breaks a piece of text into segments with consistent direction and shaping
diff --git a/docs/pipeline-dark.png b/docs/pipeline-dark.png
new file mode 100644
index 00000000..47b8a56e
--- /dev/null
+++ b/docs/pipeline-dark.png
diff --git a/docs/pipeline-light.png b/docs/pipeline-light.png
new file mode 100644
index 00000000..3ba1cb9d
--- /dev/null
+++ b/docs/pipeline-light.png
diff --git a/docs/vertical-dark.png b/docs/vertical-dark.png
new file mode 100644
index 00000000..42b8fc53
--- /dev/null
+++ b/docs/vertical-dark.png
diff --git a/docs/vertical-light.png b/docs/vertical-light.png
new file mode 100644
index 00000000..e57ea80e
--- /dev/null
+++ b/docs/vertical-light.png
diff --git a/docs/vertical.png b/docs/vertical.png
deleted file mode 100644
index 0fd8d29c..00000000
--- a/docs/vertical.png
+++ /dev/null