How to use Custom CSS/Javascript in Android WebView

By default you cannot get custom CSS/Javascript loaded into Android Webview. We should override the onPageFinished method to be able to add custom CSS/javascript to Android Webview.

This example is using Kotlin, you may search something else if you’re using native Java code or Flutter.

The best approach to use Custom CSS/Javascript is by creating the style node containing CSS and a script node containing the javascript for your sites.

var node = document.createElement('style');

node.type = 'text/css';
node.innerHTML = 'MY_CSS_STYLE';



var node = document.createElement('script');

node.type = 'text/javascript';
node.innerHTML = 'MY_JS_SCRIPT';


and override the onPageFinished method:

override fun onPageFinished(view: WebView, url: String) {
    val code = """javascript:(function() { 
        var node = document.createElement('style');

        node.type = 'text/css';
        node.innerHTML = 'body {
            color: white;
            background-color: black;