From 56afdb5a3af8a6929d2c93d46ba8b121408cd617 Mon Sep 17 00:00:00 2001
From: zloy_linux <zloy_linux@zlinux.ru>
Date: Fri, 16 Jan 2026 14:40:11 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(projects):=20support=20dark=20?=
 =?UTF-8?q?mode=20image=20variants=20(#590)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/tabi/templates/macros/list_posts.html  | 26 ++++++++++++++++--
 .../tabi/templates/partials/cards_pages.html  | 27 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/themes/tabi/templates/macros/list_posts.html b/themes/tabi/templates/macros/list_posts.html
index 2076194..714eed4 100644
--- a/themes/tabi/templates/macros/list_posts.html
+++ b/themes/tabi/templates/macros/list_posts.html
@@ -97,15 +97,37 @@
                     {% if post.extra.local_image or post.extra.remote_image %}
                         <li class="post-thumbnail">
                             <a href="{{ post.permalink }}">
+                              {% if post.extra.local_image_dark and not post.extra.local_image %}
+                                    {{ throw(message="ERROR: `local_image_dark` requires `local_image` to be set in " ~ post.path) }}
+                                {% endif %}
+                                {% if post.extra.remote_image_dark and not post.extra.remote_image %}
+                                    {{ throw(message="ERROR: `remote_image_dark` requires `remote_image` to be set in " ~ post.path) }}
+                                {% endif %}
                                 {% 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 post.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 %}
                                         {% if meta.height %}height="{{ meta.height }}"{% endif %}>
                                 {% elif post.extra.remote_image %}
-                                    <img class="thumbnail-image"
+                                    {% if post.extra.remote_image_dark %}
+                                        {# Show light image only in light mode, dark image only in dark mode #}
+                                        {% set meta_dark = get_image_metadata(path=post.extra.remote_image_dark, allow_missing=true) %}
+                                        <img class="thumbnail-image img-dark"
+                                            alt="{{ post.extra.remote_image_dark }}"
+                                            src="{{ get_url(path=post.extra.remote_image_dark) }}">
+                                    {% endif %}
+                                    <img class="thumbnail-image{% if post.extra.remote_image_dark %} img-light{% endif %}"
                                         alt="{{ post.extra.remote_image }}"
                                         src="{{ post.extra.remote_image }}">
                                 {% endif %}
diff --git a/themes/tabi/templates/partials/cards_pages.html b/themes/tabi/templates/partials/cards_pages.html
index 8aaf1ba..59fa47f 100644
--- a/themes/tabi/templates/partials/cards_pages.html
+++ b/themes/tabi/templates/partials/cards_pages.html
@@ -19,15 +19,38 @@
             data-tags="{% for tax_name, terms in page.taxonomies %}{% for term in terms | unique %}{{ term | lower }}{% if not loop.last %},{% endif %}{% endfor %}{% endfor %}"
             {% 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_dark and not page.extra.local_image %}
+                {{ throw(message="ERROR: `local_image_dark` requires `local_image` to be set in " ~ page.path) }}
+            {% endif %}
+            {% if page.extra.remote_image_dark and not page.extra.remote_image %}
+                {{ throw(message="ERROR: `remote_image_dark` requires `remote_image` to be set in " ~ page.path) }}
+            {% 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 %}
                     {% if meta.height %}height="{{ meta.height }}"{% endif %}>
             {% elif page.extra.remote_image %}
-                <img class="{{ card_image_class }}"
+                {% if page.extra.remote_image_dark %}
+                    {# Show light image only in light mode, dark image only in dark mode #}
+                    {% set meta_dark = get_image_metadata(path=page.extra.remote_image_dark, allow_missing=true) %}
+                    <img class="card-image img-dark"
+                        alt="{{ page.extra.remote_image_dark }}"
+                        src="{{ page.extra.remote_image_dark }}">
+                {% endif %}
+                {% set meta = get_image_metadata(path=page.extra.remote_image, allow_missing=true) %}
+                <img class="{{ card_image_class }}{% if page.extra.remote_image_dark %} img-light{% endif %}"
                     alt="{{ page.extra.remote_image }}"
                     src="{{ page.extra.remote_image }}">
             {% else %}