tabler/pages/_includes/ui/illustration.html

{% assign image = include.image | replace: '.svg', '' %}
{% assign height = include.height | default: 128 %}
{% assign src-light = "/illustrations/light/" | append: image %}
{% assign src-dark = "/illustrations/dark/" | append: image %}

{% assign illustration-light = site.illustrations | where: "id", src-light | first %}
{% assign illustration-dark = site.illustrations | where: "id", src-dark | first %}

{% assign replace-to-light = '<svg class="img-light' %}
{% if include.class %}{% assign replace-to-light = replace-to-light | append: ' ' | append: include.class %}{% endif %}
{% assign replace-to-light = replace-to-light | append: '" ' %}
{% assign illustration-light = illustration-light | replace: '<svg ', replace-to-light %}

{% assign replace-to-dark = '<svg class="img-dark' %}
{% if include.class %}{% assign replace-to-dark = replace-to-dark | append: ' ' | append: include.class %}{% endif %}
{% assign replace-to-dark = replace-to-dark | append: '" ' %}
{% assign illustration-dark = illustration-dark | replace: '<svg ', replace-to-dark %}

{% assign replace-to-height = 'height="' | append: height | append: '"' %}
{% assign illustration-light = illustration-light | replace: 'width="800" height="600"', replace-to-height %}
{% assign illustration-dark = illustration-dark | replace: 'width="800" height="600"', replace-to-height %}

{{ illustration-light }}
{{ illustration-dark }}