我遇到了这个问题。我在一个页面上添加了一个“黑白相间”的图像,只是意识到在暗模式下,我的页面正确地将背景改为黑色,但图像仍然是白色的。
所以我在CSS中添加了这个规则来检测暗模式,并自动反转图像的颜色:
@media (prefers-color-scheme: dark) {
.my-image {
filter: invert(100%);
}
}
在我的例子中,它不是100%准确的,因为我的深色背景色不是完全黑色,但总比没有好。
为了使效果更完美,您还可以使用CSS背景图像而不是HTML中的img标记来添加图像,而且我可以在黑暗模式下轻松地交换该图像。