使用css进行颜色翻译

我遇到了这个问题。我向页面添加了“黑白”图像，我刚刚注意到在黑暗模式下，我的页面实际上将背景更改为黑色，但图像仍然是白色的。

所以我在CSS中添加了这个规则来识别黑暗状态并自动反转图像颜色：

@media (prefers-color-scheme: dark) {
  .my-image {
    filter: invert(100%);
  }
}

就我而言，它不是 100% 准确，因为我的深色背景颜色不是完全黑色，但总比没有好。

最重要的是，您还可以使用 CSS 背景图像而不是 HTML 中的 img 标签添加图像，并且我可以在深色模式下轻松更改它。