Kotlin how to use js in a webview containing xml file and css

i am building an app where in one activity i have webview and i have an xml file that i display in this webview. i declare it like this :

 val destination = context?.getFilesDir()?.getAbsolutePath() + File.separator + "/$article.xml"
 var filedest = File(destination)
   
 if (!filedest.exists())
     return

 val webSetting = webView.settings
 webSetting.builtInZoomControls = true
 webSetting.javaScriptEnabled = true
 webSetting.textZoom = 100
 webSetting.javaScriptEnabled = true

 webView.loadUrl("file:///" + destination)

With this i set the websetting that i want for my webview and i can display my xml file and it work perfectly.

Now i would like to style my text so in my xml i added a line to use a css file :

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="article.css"?>

With the associate file i was able to style my xml.

The problem is that now i would like to add some kind of js on top of my css so that the user could modifie some style by himself for exemple the fontsize of the background color. So i would like to have some button on my actionbar that would trigger a script in js that would modifie the fontsize for exemple.

I tried to follow this from android developer : https://developer.android.com/guide/webapps/webview#:~:text=your%20Android%20app.-,Bind%20JavaScript%20code%20to%20Android%20code,to%20display%20a%20Dialog%2C%20instead%20of%20using%20JavaScript%27s%20alert()%20function.,-To%20bind%20a

But i couldn't make it work. i tried to add the script in the beginning of my xml but instead of adding a button to send a toast, it just added it as text in my xml. Maybe it doesn't work with xml ?

So in the end i would like to use something to trigger some modification on my webview from my actionbar. I still think that js might be a good option but i couldn't make it work. i am also open to any other idea.

from Kotlin how to use js in a webview containing xml file and css