Какой JavaScript / CSS я могу добавить в мой WebView, чтобы инвертировать только фон страницы и белый текст?

Question

Так что я использую плагин Flutter webview_flutter, который не поддерживает темный режим. То, что я хотел бы сделать, - это сценарий CSS или JS, который я могу вставить на любую загружаемую страницу, так что в основном все белое становится черным / темным (например, фон) и все темно / черный становится белым (как текст). Я хочу оставить не черный / белый цвета на сайте точно так же. Как я могу go сделать это?

Answer 1

Я решил это сам, используя стиль Global Dark, доступный по адресу userstyles.org: 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)" +
                                  "})()");