将任何 HTML 转换为暗模式

Question

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

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

就像 Gmail 在您的设备启用了深色模式时所做的那样。

我正在使用 React Native 和 Expo，通过 WebView 显示 HTML，以防万一。谢谢！

Answer 1

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

没有简单的方法可以获得完美的结果，因为“黑暗模式”不是一个明确定义的概念，并且取决于特定内容的实际 CSS。

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

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

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