From 2291932a6afbea985d87c8871f6882d0d1ae4941 Mon Sep 17 00:00:00 2001
From: poolitzer <github@poolitzer.eu>
Date: Wed, 26 Nov 2025 23:07:27 +0100
Subject: [PATCH] :sparkles:  feat(local_image): introduce dark option for
 local_image

---
 content/blog/mastering-tabi-settings/index.md |  1 +
 templates/macros/list_posts.html              | 11 ++++++++++-
 templates/partials/cards_pages.html           | 11 ++++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/content/blog/mastering-tabi-settings/index.md b/content/blog/mastering-tabi-settings/index.md
index 74290127..1adfa5b1 100644
--- a/content/blog/mastering-tabi-settings/index.md
+++ b/content/blog/mastering-tabi-settings/index.md
@@ -415,6 +415,7 @@ invertible_image = false
 - `description` is the description of the project.
 - `weight` determines the order in which the projects are shown. The lower the weight, the higher the project will appear.
 - `local_image` is the path to the image of the project. This image is shown on the projects page.
+- `local_image_dark` is an optional path to an alternative image to be shown in dark mode. When set, `local_image` is shown in light mode only.
 - `invertible_image` inverts the image colours in dark mode. Useful for black and white logos/icons.
 
 When a user clicks on the image or title of a project, they will be taken to the project's page. If you'd rather have users go to an external link, you can set `link_to = "https://example.com` in the `[extra]` section of the project's `.md` file.
diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html
index 20761948..0de34be7 100644
--- a/templates/macros/list_posts.html
+++ b/templates/macros/list_posts.html
@@ -98,8 +98,17 @@
                         <li class="post-thumbnail">
                             <a href="{{ post.permalink }}">
                                 {% if post.extra.local_image %}
+                                    {% if post.extra.local_image_dark %}
+                                        {# Show light image only in light mode, dark image only in dark mode #}
+                                        {% set meta_dark = get_image_metadata(path=post.extra.local_image_dark, allow_missing=true) %}
+                                        <img class="thumbnail-image img-dark"
+                                            alt="{{ post.extra.local_image_dark }}"
+                                            src="{{ get_url(path=post.extra.local_image_dark) }}"
+                                            {% if meta_dark.width %}width="{{ meta_dark.width }}"{% endif %}
+                                            {% if meta_dark.height %}height="{{ meta_dark.height }}"{% endif %}>
+                                    {% endif %}
                                     {% set meta = get_image_metadata(path=post.extra.local_image, allow_missing=true) %}
-                                    <img class="thumbnail-image"
+                                    <img class="thumbnail-image{% if page.extra.local_image_dark %} img-light{% endif %}"
                                         alt="{{ post.extra.local_image }}"
                                         src="{{ get_url(path=post.extra.local_image) }}"
                                         {% if meta.width %}width="{{ meta.width }}"{% endif %}
diff --git a/templates/partials/cards_pages.html b/templates/partials/cards_pages.html
index b923b2c1..c03a7d98 100644
--- a/templates/partials/cards_pages.html
+++ b/templates/partials/cards_pages.html
@@ -20,8 +20,17 @@
             {% endif %}>
             {% if page.extra.invertible_image %}{% set card_image_class = "card-image invertible-image" %}{% else %}{% set card_image_class = "card-image" %}{% endif %}
             {% if page.extra.local_image %}
+                {% if page.extra.local_image_dark %}
+                    {# Show light image only in light mode, dark image only in dark mode #}
+                    {% set meta_dark = get_image_metadata(path=page.extra.local_image_dark, allow_missing=true) %}
+                    <img class="card-image img-dark"
+                        alt="{{ page.extra.local_image_dark }}"
+                        src="{{ get_url(path=page.extra.local_image_dark) }}"
+                        {% if meta_dark.width %}width="{{ meta_dark.width }}"{% endif %}
+                        {% if meta_dark.height %}height="{{ meta_dark.height }}"{% endif %}>
+                {% endif %}
                 {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
-                <img class="{{ card_image_class }}"
+                <img class="{{ card_image_class }}{% if page.extra.local_image_dark %} img-light{% endif %}"
                     alt="{{ page.extra.local_image }}"
                     src="{{ get_url(path=page.extra.local_image) }}"
                     {% if meta.width %}width="{{ meta.width }}"{% endif %}