我有一个非常简单的静态网站，写在HTML和CSS的风格规则.HTML代码的简化形式为:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My title</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My static site</h1>
<p>This is a simplified example for my static site.</p>
<p>I don't use PHP, JavaScript, or any other programming language</p>
<img style="width: 40%;" src="image.png" />
</body>
事实是，在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;
}
}
如你所见，内容非常非常简单.我通常try 使用透明胶片来放置图像，这样它们在明暗模式下都能看起来很好.
然而，我不能用很多图片做到这一点，而且它们在某些方面变得无可救药地难以辨认.在这些情况下，我可以克隆映像，如下例所示:
<img style="width: 40%;" src="image.png" />
<img style="width: 40%;" src="dark-image.png" />
有没有一种方法可以知道，而不使用编程语言或cookie(可能是CSS？)来告诉代码使用哪个图像？
如果我们发现自己处于黑暗模式，有没有其他方法可以将图像调暗到CSS英寸？
或者这可能是不可能的，我必须为它实现一个javascript的脚本？