✨ feat: add dual image support for switching themes

content/shortcodes.md

@@ -7,9 +7,20 @@ tags = ["showcase", "shortcodes"]
 
 ## Image shortcodes
 
+### Dual theme images
+
+Useful if you want to use a different image for the light and dark themes:
+
+{{ dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") }}
+
+Usage:
+```
+{{/* dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") */}}
+```
+
 ### Invertible image
 
-You can use this shortcode for graphs, line drawings, diagrams…
+Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.
 
 {{ invertible_image(src="$BASE_URL/img/graph.webp", alt="Invertible graph") }}
 

sass/parts/_image.scss

@@ -37,3 +37,16 @@ figure h4::before {
 svg {
   max-height: 15px;
 }
+
+.img-dark {
+  display: none;
+}
+
+[data-theme="dark"] {
+  .img-dark {
+    display: block;
+  }
+  .img-light {
+    display: none;
+  }
+}

templates/shortcodes/dual_theme_image.html

@@ -0,0 +1,2 @@
+<img src="{{ light_src | safe | replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-light">
+<img src="{{ dark_src | safe | replace(from="$BASE_URL" , to=config.base_url) }}" {% if alt %}alt="{{ alt }}" {% endif %} class="img-dark">