Альтернативные изображения на основе цветовых предпочтений пользователя без использования JavaScript. ⇐ CSS

[Anonymous]

У меня есть простой статический сайт, созданный с использованием HTML и CSS. Вот фрагмент HTML-кода:

Код: Выделить всё

My static site
This is a simplified example of my static site.
I don't use PHP, JavaScript, or any other programming language
[img]image.png[/img]

В CSS я установил определенные правила, используя «preferences-color-scheme: dark» для пользователей, которые настроили свои устройства для темного режима:

Код: Выделить всё

body {
color: #000;
background-color: #fff;
font-family: monospace;
max-width: 130ex;
margin-left:auto;
margin-right:auto;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
}

@media (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #000;
}
}

Обычно я стараюсь использовать изображения с прозрачностью, чтобы они хорошо выглядели как в светлом, так и в темном режимах. Однако для некоторых изображений этого подхода недостаточно, и в определенных ситуациях их становится трудно различить. В таких случаях я прибегаю к дублированию изображения и использованию отдельных изображений для светлого и темного режимов:

Код: Выделить всё

[img]image.png[/img]
[img]dark-image.png[/img]

Есть ли способ указать, какое изображение использовать, не прибегая к языкам программирования или файлам cookie (возможно, с помощью CSS)? Альтернативно, существует ли подход на основе CSS для затемнения изображения в темном режиме без его дублирования?
Или необходимо реализовать решение на JavaScript?< /п>

Подробнее здесь: https://stackoverflow.com/questions/746 ... javascript