将任何HTML转换为深色模式

Question

我正在构建一个可以在上面显示电子邮件的应用程序。我无法控制这些电子邮件，所以我不知道他们的CSS是什么样子的。

有没有什么“简单”的方法可以在可能的时候自动将整个HTML切换到暗模式？

就像你的设备启用了黑暗模式时Gmail所做的那样。

我使用了React Native和Expo，通过WebView显示了HTML，以防有任何帮助。谢谢!

Answer 1

我个人倾向于尊重电子邮件的CSS，并保持它们的原样。

没有简单的方法来获得完美的结果，因为“暗模式”并不是一个定义良好的概念，它取决于具体内容的实际CSS。

但是一个粗略的解决方案是非常便宜的。只需将CSS应用于整个filter: invert(100%)。

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

  /* double apply invert filter to cancel out effect on images */
  img {
    filter: invert(100%);
  }
}