将任何HTML转换为暗黑模式

Question

我正在开发一个应用程序来显示邮件。由于我无法控制这些邮件，因此不知道它们的CSS样式是什么样的。

是否有一种“简单”的方法可以在可能的情况下自动将整个HTML切换为暗模式？

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

我正在使用React Native和Expo，并通过WebView显示HTML，如果有任何帮助，请告诉我。谢谢！

- Franco Muñiz

Answer 1

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

由于“暗模式”概念并没有明确定义，并且取决于特定内容的实际CSS，因此很难获得完美的结果。

但是一个简单的解决方案是非常便宜的。只需将CSS filter: 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%);
  }
}

- hackape

Answer 2

这是一个简单的方法，可以在浅色模式和深色模式之间切换。

javascript:(function(){
    document.documentElement.style.filter = document.documentElement.style.filter ? '' : 'invert(100%)'
})();

复制/粘贴到您的浏览器上的任何网站进行测试。

- ron190