Поддержка тёмной и светлой темы для изображений в контенте

[furtivite]

GitHub стал поддерживать картинки для тёмной темы, которые делаются через добавление хвостов #gh-dark-mode-only и #gh-light-mode-only вот так:

![Тёмная](https://github.com/furtivite/furtivite/blob/master/img/night.png?raw=true#gh-dark-mode-only)
![Светлая](https://github.com/furtivite/furtivite/blob/master/img/day.png?raw=true#gh-light-mode-only)

Стоит научить 11ty работать с такими вводными (сделать трансформацию), чтобы у нас не появилось две картинки в статье друг под другом.

[monochromer]

Как добавлять подписи к таким изображениям? Что-то вроде такого:

![](night.png#gh-dark-mode-only)
![](day.png#gh-light-mode-only)
Пример подписи

[furtivite]

Как добавлять подписи к таким изображениям? Что-то вроде такого:

![](night.png#gh-dark-mode-only)
![](day.png#gh-light-mode-only)
Пример подписи

Кажется, что-то подобное, я предполагаю, что логика должна быть следующая:

если есть любой из хвостов: #gh-dark-mode-only или #gh-light-mode-only нужно

1. Проверить есть ли альтернативный хвост, чтобы у нас не случилось ситуации, когда на тёмной теме картинка есть, а на светлой наоборот.
2. Если альтернативного хвоста нет, то хвост «убивается» трансформацией и в обоих режимах выводится единственная картинка, которая есть.
3. Если есть обе картинки, то #gh-dark-mode-only выводится внутри <picture> как <source srcset="{{image-dark.url}}" media="(prefers-color-scheme: dark)"> с «убитым» хвостом, чтобы картинка работала. Обычная вставляется в
4. Затем уже работает трансформация картинки в <figure>

По крайней мере, это предположение.

[monochromer]

picture с media="(prefers-color-scheme: dark)" не подойдёт, так как есть пользовательский выбор.

[monochromer]

если есть любой из хвостов

Конечно, хорошо обрабатывать крайние случаи, но для упрощения кода было бы неплохо такие моменты отлавливать на контентном ревью.

[pepelsbey]

На самом деле, эта фича больше нужна проектам, которые на Гитхабе и без сборки. То есть для документации и ридми. В нашем случае нам проще положить картинку для тёмной темы рядом и при сборке подключать её, если она есть.

ну и другая большая проблема: у нас пока вообще нет такой контентной графики. То есть эта фича, которую пилим на будущее. И кажется, что приоритет у неё небольшой.

Другое дело, если мы захотим в контентной документации вставлять картинки для разных тем, но тут Гитхаб сам всё отработает.

[cergmin]

у нас пока вообще нет такой контентной графики

Чтобы такая графика появилась, нужно добавить её поддержку. Это как с демками, никто бы не стал делать такие примеры, если бы нельзя было их вставить.

[cergmin]

Кажется, что вариант, где можно просто рядом положить тёмную версию картинки, достаточно удобный. То, что это именно тёмная версия конкретной картинки можно определять, например, по суффиксу .dark в имени файла. То есть будут dog.png и dog.dark.png.

@pepelsbey, есть ли какие-нибудь причины, по которым не стоит сейчас добавлять эту фичу в таком виде? Если нет, то я могу ей заняться.

[pepelsbey]

Мы обсудили в редакции, что пока остаёмся в рамках текущей идеи: тёмная графика и демки. К сожалению, наш опыт показывает, что усложнять демки или делать две версии скринов или схем вряд ли кто-то будет. Так что и делать для этого механизмы подмены смысла нет.