question

XamarinNewBie-6038 avatar image
0 Votes"
XamarinNewBie-6038 asked ColeXia-MSFT answered

How to activate darkmode for the text changed in WkWebViewRenderer?

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.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered

Hello,

Welcome to Microsoft Q&A!

We can do nothing to support dark mode on WebView programmatically .

However , there is an easy way to achieve it .

Just add an @media section to the CSS .

@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(38,38,41);
        color: white;
    }
    a:link {
        color: #0096e2;
    }
    a:visited {
        color: #9d57df;
    }
}


Refer to https://stackoverflow.com/questions/57203909/how-to-use-ios-13-darkmode-for-wkwebview .


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.