How to change WKWebView text color?

Question

I have a ViewController with WKWebView and I load my .html and .css files with text for webView. It is look like controller to reading books in Apple Books app.

do {
            guard let filePath = Bundle.main.path(forResource: "index", ofType: "html") 
                else {
                    print ("File reading error")
                    return
            }
            
            let headerString = "<meta name=\"viewport\" content=\"initial-scale=1.1\" />"
            let content =  try String(contentsOfFile: filePath, encoding: .utf8)
            let baseUrl = URL(fileURLWithPath: filePath)
            
            webView.loadHTMLString(headerString+content, baseURL: baseUrl)

        }
        catch {
            print ("File HTML error")
        }

Also I have 4 themes to change appearance in my ViewController(white, black, navy and yellow, like in Apple Books). I want to change my text color in webView when I change theme. How to do it? How to change color of webView?

Answer 1

In your .html file you need to write JavaScript function (as example: changeColor) which changes color for your HTML elements. When you change theme in your ViewController you need to execute callAsyncJavaScript function with JavaScript function name.

let web = WKWebView()
web.callAsyncJavaScript("javaScriptFumction", in: WKContentWorld)

WKWebView have async implementation for callAsyncJavaScript function.