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

Question

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

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)" +
                                  "})()");

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

What JavaScript/CSS can I inject into my WebView to invert only the background of the page and white text?

html

javascript

css

webview

flutter