How to change SFSafariViewController ToolBar color

Question

Expected Output: I want to change the ToolBar color to Dark Black.

Actual Output: ToolBar is light Grey color.

Here is the code:

let webViewController = SFSafariViewController(URL: url, entersReaderIfAvailable: true)
self.navigationController?.toolbar.barTintColor = UIColor.blackColor()
self.navigationController?.toolbar.tintColor = UIColor.whiteColor()
self.navigationController?.toolbar.barStyle = UIBarStyle.Black
self.navigationController?.pushViewController(webViewController, animated: true)

So what happens. Is your code not working or what ? Please add more details. — Mayur Prajapati, Feb 11 '16 at 07:07
@Mack Tool Bar Code is not taking impact on SFSafariViewController Bottom. — Srikanth Adavalli, Feb 11 '16 at 07:12
@BlackbirdSR-71 self.navigationController?.toolbar.tintColor = UIColor.whiteColor() i already did. but it is not taking any impact — Srikanth Adavalli, Feb 11 '16 at 15:16

score 27 · Accepted Answer · edited Oct 24 '17 at 20:11

27

Updated Answer for iOS 10 API

SFSafariViewController now has preferredBarTintColor and preferredControlTintColor properties to control how the toolbars look.

Original Answer

SFSafariViewController renders off-process. You can only change the tint color, but not bar style or bar tint color.

To set the tint color, set the Safari controller's view's tint color like so:

let sfController = SFSafariViewController(URL: url, entersReaderIfAvailable: true)
sfController.view.tintColor = UIColor.redColor()
navigationController?.showViewController(sfController, sender: self)

edited Oct 24 '17 at 20:11

shim

9,289
12
69
108

answered Feb 12 '16 at 15:27

Léo Natan

56,823
9
150
195

i was able to change the color of navigation bar. But my client req is to change the color of toolbar. – Srikanth Adavalli Feb 12 '16 at 18:42
1

@Audi It's not possible. Open an enhancement request with Apple. – Léo Natan Feb 12 '16 at 18:43
or you can use wkwebview and make your own toolbar – hariszaman Aug 13 '16 at 12:30
1

Make sure that you're not setting the tint for the window or for all views using `appearance` somewhere else or this won't work. – Rivera Feb 20 '17 at 15:13
Tried the preferred properties and didn't work. Tried removing all calls to `appearance` and still does not work. – Eric Alford Jun 13 '17 at 15:18

score 5 · Answer 2 · answered Jan 14 '19 at 10:55

There are two ways:

let resetPasswordSafari = SFSafariViewController(url: url, entersReaderIfAvailable: true)
resetPasswordSafari.preferredBarTintColor = .mainColor
resetPasswordSafari.preferredControlTintColor = .black

And:

class ResetPasswordSafariViewController: SFSafariViewController {

  override init(url URL: URL, entersReaderIfAvailable: Bool) {
    super.init(url: URL, entersReaderIfAvailable: entersReaderIfAvailable)
    delegate = self

    preferredBarTintColor = .blue
    preferredControlTintColor = .black
  }
}

// MARK: - SFSafariViewControllerDelegate

extension ResetPasswordSafariViewController: SFSafariViewControllerDelegate {
  internal func safariViewControllerDidFinish(_ controller: SFSafariViewController) {
    controller.dismiss(animated: true)
  }
}

Good luck all!

what's `internal func safariViewControllerDidFinish` for? and will apple approve apps that subclass `SFSafariViewController`? — spnkr, Sep 04 '19 at 20:10
@spnkr yes, will approve. Here's the definition of "internal" access level: Internal access enables entities to be used within any source file from their defining module, but not in any source file outside of that module. You typically use internal access when defining an app’s or a framework’s internal structure. — Mihail Salari, Sep 05 '19 at 08:38

score 0 · Answer 3 · answered Aug 13 '16 at 11:38

I see no way to change background color of ToolBar, but it is possible to change color of buttons in ToolBar.

[UIBarButtonItem appearance].tintColor = [UIColor whiteColor];

All other changes in appearance, or directly in controller properties, have no effect, as I see.

score 0 · Answer 4 · edited May 26 '21 at 07:33

//To make changes in SFSafariViewController

     if let url = URL(string:"https://sandydhumale.business.site") {
        let config = SFSafariViewController.Configuration()
        config.entersReaderIfAvailable = true
        config.barCollapsingEnabled = true
        let vc = SFSafariViewController(url: url, configuration: config)
        vc.dismissButtonStyle = .close
        vc.preferredBarTintColor = .green // Your choice color
        vc.preferredControlTintColor = .white // All buttons/items color
        self.present(vc, animated: true, completion: nil)
    }

How to change SFSafariViewController ToolBar color

4 Answers4