我可以在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，你可能不需要所有的代码，这样你就可以显著地减少它

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