How to activate darkmode for the text changed in WkWebViewRenderer?

Question

I was trying to resize the text in a webView in Xamarin.iOS with a webView-renderer. It works, but my problem is that the dark mode does not work anymore. I have already changed the background of the web view, so it is shown right, but I don't know how to do it with the text.

  public class NavigationDelegat : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        string Size = "300%"; 
        string text = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", Size);
        
        WKJavascriptEvaluationResult handler = (NSObject result, NSError err) => {
            if (err != null)
            {
                System.Console.WriteLine(err);
            }
            if (result != null)
            {
                System.Console.WriteLine(result);
            }
        };

        webView.EvaluateJavaScript(text, handler);
        webView.Opaque = false;
        webView.BackgroundColor = UIColor.Clear;


    }
}

How to do it? The text is always black, also when darkMode is activated.

Junior Jiang · Accepted Answer · 2021-02-24T02:54:58.903

You could have a try with code as follows:

public class NavigationDelegat : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        string Size = "300%"; 
        string textSize = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", Size);
        string TextColor = "#ffffff"; 
        string textColor = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextFillColor = '{0}'", TextColor);
        
        WKJavascriptEvaluationResult handler = (NSObject result, NSError err) => {
            if (err != null)
            {
                System.Console.WriteLine(err);
            }
            if (result != null)
            {
                System.Console.WriteLine(result);
            }
        };

        webView.EvaluateJavaScript(textSize , handler);
        webView.EvaluateJavaScript(textColor, handler);
        webView.Opaque = false;
        webView.BackgroundColor = UIColor.Clear;
    }
}

============================Update=============================

private class WKwebviewdeleagte : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        base.DidFinishNavigation(webView, navigation);
        if(UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
        {
            string Size = "300%";
            string TextSize = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", Size);
            string TextColor;
            string BackgroundColor;
            if (UITraitCollection.CurrentTraitCollection.UserInterfaceStyle == UIUserInterfaceStyle.Light)
            {
                string textColor = "#666666";
                TextColor = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextFillColor = '{0}'", textColor);
                string backgroundColor = "\"#FFFFFF\"";
                BackgroundColor = String.Format(@"document.body.style.backgroundColor='{0}'", backgroundColor);
            }
            else
            {
                string textColor = "#ffffff";
                TextColor = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextFillColor = '{0}'", textColor);
                string backgroundColor = "\"#001A1A\"";
                BackgroundColor = String.Format(@"document.body.style.backgroundColor='{0}'", backgroundColor);
            }

            WKJavascriptEvaluationResult handler = (NSObject result, NSError err) => {
                if (err != null)
                {
                    System.Console.WriteLine(err);
                }
                if (result != null)
                {
                    System.Console.WriteLine(result);
                }
            };

            webView.EvaluateJavaScript(TextSize, handler);
            webView.EvaluateJavaScript(TextColor, handler);
            webView.EvaluateJavaScript(BackgroundColor, handler);
            //webView.Opaque = false;
            //webView.BackgroundColor = UIColor.Clear;
        }
    }
}

Thank you, but this makes the text always white. I want it white in darkmode and black in normal mode. — M_B, Feb 23 '21 at 22:19
@M_B You could detect `UITraitCollection.CurrentTraitCollection.UserInterfaceStyle` to modify the text color or background color in the background. I have updated the answer. — Junior Jiang, Feb 24 '21 at 02:53

How to activate darkmode for the text changed in WkWebViewRenderer?

1 Answers1