I have installed a WP theme with a widget supporting accessibility for persons with vision problems (allows to change contrast, colors, text size of a page content - very similiar to changes in day/night styles). The demo of this theme is available here, the widget is visible by clicking on the icon with a human figure in a wheelchair at the top right corner. Then I created a child theme in WP to hava a possibility to modify the functionality and style.
In WP pages I have iframe elements that contain other html pages. When I click on accessibility widget, it changes the background color and the text color only in the WP post but not in the iframe content. I have found in this SO answer that the iframe content also could be changed by adding to the event handler the following:
var iframe = document.getElementsByTagName('iframe')[0];
iframe.style.background = 'white';
iframe.contentWindow.document.body.style.backgroundColor = 'white';
I wrote to the WP theme developer since there is a support for theme buyers, and he politely responded this feature could be considered for the future releases, that probably means "never" in a real life. Thus, I need to find a solution now with you help.
Please could you suggest how it is possible to modify (or overwrite) in the WP child theme the JS function already existing in the parent theme that is responsible to the work of accessibility widget? The final goal is to change font color and background both in the main WP post and the iframes content when I click on the accessibility widget.
Please find below the content of the WP post
<div>
<p>There is some text before iframe that changes accessibility attributes appropriately</p>
</div>
<div>
<h1 style="text-align:left;font-size:32px;font-style:normal;font-weight:bold;margin:2px">Table . This is a table that is situated inside an iframe and does not change accessibility attributes.</h1>
<iframe src="/path_to_WP_dir_with_files/child.html" scrolling="auto" seamless="seamless" width="100%" height="360" name=""></iframe>
</div>
<div>
<p>Here is some text after iframe that changes accessibility attributes appropriately</p>
</div>
and content of the child.html that is inserted in iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
</head>
<body>
<div>
<p>There is some text inside iframe that does not change color and background if they changed in the parent window</p>
</div>
</body>
</html>