我可以在WebView中注入什么JavaScript / CSS来仅反转页面背景和白色文本？

Posted 2021-04-19

因此，我正在使用不支持暗模式的Flutter的webview_flutter插件。我想做的是拥有一个CSS或JS脚本，可以将其注入到我加载的任何页面中，这样基本上所有白色的东西都会变成黑/暗（例如背景），而所有黑色的东西都会变成黑/暗。白色（如文字）。我想让网站的非黑色/白色完全相同。我该怎么做？

答案

我前一段时间使用userstyles.org上提供的Global Dark样式解决了这个问题：https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark。您可以从此处查看CSS，并且可能不需要所有代码，因此可以大幅度减少代码。这是从文件中注入.css的方法：

//inject custom css script (defined below)
//injectCSS3();
String css = await rootBundle.loadString(your_path_here);
var bytes = utf8.encode(css);
var base64Str = base64.encode(bytes);
webView.evaluatejavascript("javascript:(function() {" +
                                  "var parent = document.getElementsByTagName('head').item(0);" +
                                  "var style = document.createElement('style');" +
                                  "style.type = 'text/css';" +
                                  // Tell the browser to BASE64-decode the string into your script !!!
                                  "style.innerhtml = window.atob('" + base64Str + "');" +
                                  "parent.appendChild(style)" +
                                  "})()");