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

Question

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

Answer 1

不久前，我使用 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)" +

                                  "})()");