Change background color of UIToolbar in a WKWebView

Question

I am coding my app using Xamarin, but I can translate any swift/objective-C responses.

I have a WKWebView that I using to display data with LoadHtmlString(). I want to change the background color of the UIToolbar that is displayed above the keyboard when a user focuses an input field. Right now, the button text color and background color are both white, so the buttons aren't visible.

I can change the button text color by using UIBarButtonItem.Appearance.TintColor = UIColor.White;, but this will also change the text color of the buttons in my UINavigationBar. I would rather leave the text white, and change the background color of the UIToolbar.

I can slightly modify the background color using UIToolbar.Appearance.BackgroundColor = UIColor.Red;, but this just adds a subtle tint of the color to the UIToolbar, and doesn't actually make the toolbar dark enough for the white text to be visible.

Here is my complete code for setting up my Appearance defaults:

UIColor lightColor = UIColor.White;
UIColor themeColor = UIColor.Red;

UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);

UINavigationBar.Appearance.BarStyle = UIBarStyle.Black;
UINavigationBar.Appearance.BarTintColor = themeColor;
UINavigationBar.Appearance.Translucent = false;
UINavigationBar.Appearance.TintColor = lightColor;
UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
{
    TextColor = lightColor  
});

UIStringAttributes navBarAttributes = new UIStringAttributes();
navBarAttributes.ForegroundColor = lightColor;
UINavigationBar.Appearance.TitleTextAttributes = navBarAttributes;


UITabBar.Appearance.BarTintColor = themeColor;      
UITabBar.Appearance.TintColor = lightColor;

UIToolbar.Appearance.BarTintColor = themeColor;
UIToolbar.Appearance.TintColor = lightColor;

UIBarButtonItem.Appearance.TintColor = lightColor;
UIButton.AppearanceWhenContainedIn(typeof(UINavigationBar)).TintColor = lightColor;
UIToolbar.Appearance.BackgroundColor = themeColor;

Is there a way to change the WKWebView's toolbar background color without having to retheme my entire app?

If I can't change the background color of the toolbar, I am open to changing the button text color when displayed in a WKWebView. I have tried adding the following code, but nothing seems to work.

//Using green to see if the code is working.
UIBarButtonItem.AppearanceWhenContainedIn(typeof(WKWebView)).TintColor = UIColor.Green;
UIBarButtonItem.AppearanceWhenContainedIn(typeof(MyViewController)).TintColor = UIColor.Green;

Junior Jiang · Answer 1 · 2019-10-03T02:12:38.030

1

You can have a try with custom UIToolBar to change its background color by an image :

 public class MyToolBar: UIToolbar
{
    public override void Draw(CGRect rect)
    {
        base.Draw(rect);
        CGContext c = UIGraphics.GetCurrentContext();
        UIImage image = new UIImage("background.png");
        //here set image to be background color
        c.DrawImage(rect, image.CGImage);
    }
}

And toolbar will only used for where you used , can not affecting other toolbar in app.

MyToolBar myToolBar = new MyToolBar();
myToolBar.Frame = new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 50);
UIBarButtonItem doneItem = new UIBarButtonItem("Done", UIBarButtonItemStyle.Done, doneClickMethod);
List<UIBarButtonItem> list = new List<UIBarButtonItem>();
list.Add(doneItem);
myToolBar.Items = list.ToArray();
MySearchBar.InputAccessoryView = myToolBar;

edited Oct 03 '19 at 02:12

answered Oct 02 '19 at 06:22

Junior Jiang

12,430
1
10
30

How would I use a custom UIToolbar with the WKWebView? – Dave Oct 02 '19 at 11:55
@Dave If adding a toolbar above the keyboard, you can refer to this [dicussion](https://stackoverflow.com/questions/23904848/how-can-i-add-a-toolbar-above-the-keyboard) . – Junior Jiang Oct 03 '19 at 01:31
Maybe I am not explaining this properly. I am not creating any UIToolbar. The toolbar above the keyboard is displayed automatically when a users selects an editable field in a webpage (such as an tag).The bar contains a "Done" button, and arrow buttons to advance to the next field in the form. I want to change the background color of THAT toolbar. – Dave Oct 03 '19 at 14:04
@Dave Okey , you mean the keyboard foucs by the webpage ? Could you show a screenshot , I will check it. – Junior Jiang Oct 04 '19 at 01:08
I've ended up coding my app a different way to get around this issue, so I can't easily provide a screenshot. This Stackoverflow user had a similar problem. He also resorting to changing his app because you could not find a solution to the problem. https://stackoverflow.com/questions/51837022/how-to-edit-accessory-view-of-keyboard-shown-from-wkwebview – Dave Oct 04 '19 at 13:53
@Dave Okey , got it . If have solved by other way , you can share it in answer. I will check shared discussion , if get good solution in Xamarin Forms will also update in answer. – Junior Jiang Oct 07 '19 at 03:11
By "solving it another way", I meant that I decided to make native pages rather than relaying on rendering content in a WebView. I wouldn't call that a "solution" to this problem. – Dave Oct 08 '19 at 10:45
Yeah , that will not be a solution . I will continue to search the best workaround. . – Junior Jiang Oct 09 '19 at 01:29

Change background color of UIToolbar in a WKWebView

1 Answers1