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

Question

So I am using Flutter's webview_flutter plugin that does not support dark mode. What I would like to do is have a CSS or JS script that I can inject into any page that I load so that basically all the things that are white turn black/dark (like backgrounds) and all the things that are dark/black turn white (like text). I want to leave the non black/white colors of the website exactly the same. How can I go about doing this?

Solution

I solved this myself a while back using the Global Dark style available at userstyles.org: https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark. You can view the CSS from here, and you may not need all the code so you can significantly cut down on it. Here's how to inject .css from a file:

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