javascript - 将任何 HTML 转换为深色模式

Question

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

是否有任何“简单”的方法可以尽可能地将整个 HTML 自动切换到暗模式？

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

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

标签： javascripthtmlcssreact-nativeexpo

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%);
  }
}