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

[Anonymous]

У меня есть простой статический сайт, построенный с HTML и css . Вот фрагмент кода HTML: < /p>

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

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 я установил конкретные правила, используя Prefers-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;
}
}
< /code>
Я обычно стремлюсь использовать изображения с прозрачными, чтобы они выглядели хорошо как в световых, так и в темных режимах. Однако для некоторых изображений этого подхода недостаточно, и их становится трудно различать в определенных ситуациях. В таких случаях я прибегаю к дублированию изображения и использованию отдельных изображений для световых и темных режимов: < /p>

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

​​ Прибегая к языкам программирования или файлам cookie (возможно, через CSS )? В качестве альтернативы, существует ли CSS -основанный подход, чтобы затемнить изображение для темного режима без дублирования его?>

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