Customize "searchable" Search field SwiftUI iOS 15

Question

When using the new .searchable() modifier in SwiftUI on iOS 15 I have no way to customize the Search Bar appearance. Specifically, I wan't it to look good with the color I'm using for my Navigation Bar.

I tried altering the .appearance() like this.

UISearchBar.appearance().backgroundColor = UIColor.white
UISearchBar.appearance().tintColor = UIColor.white
UISearchBar.appearance().barTintColor = UIColor.white

But only managed to get this.

Even though this kind of succeeded the spacing does not look good. I would rather tint it white.

Amarette

Could you provide some additional code. E.g., The code in the ContentView? This is because by adding the searchable() modifier, the TextField is transparent – Thedathedric

You could implement the init() function to initialize these attributes. It actually works for me when I use UINavigationBar.appearnce() to change the tintColor. But I am still learning how to change the textColor. – Shew

Answer 1

I solved this by using these two global appearance lines.

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .white
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).tintColor = .black

Amarette

For me it seems like the tintColor has no effect. Have you tried to set the color to anything but black? – Holm

Answer 2

iOS 16, I did this:

    UISearchBar.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).setImage(<your search image, e.g., magnifyingGlassImage>, for: .search, state: .normal)
    UISearchBar.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).setImage(<your clear image, e.g., closeImage>, for: .clear, state: .normal)
    UISearchBar.appearance(whenContainedInInstancesOf: [UINavigationBar.self]).tintColor = <Color.yourTintColor>
    UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = <Color.yourBackgroundColor>
    UISearchTextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: <your promptText, e.g., "Search", attributes: [.foregroundColor: <Color.yourForegroundColor>])

Plastic

It must be the accepted answer in 2023! – Contrapose

Doesn't seem to work in iOS 17, see #77958154 – Toothsome

Answer 3

Not ideal, but you could try overriding only the search bar's color scheme / interface style to Dark:

UISearchBar.appearance().overrideUserInterfaceStyle = .dark

This way, the rest of the navigation bar and app should remain unaffected.

Tepefy

Answer 4

Setting the .font and .foregroundColor modifiers after .searchable will do the desired result, but it still doesn't work with .background modifier as the time of this writing (iOS 16).

Hitlerism

Answer 5

The textColor of the input field can be changed from black to white by altering the .preferredColorScheme() of the view to which the .searchable modifier is applied. Setting .preferredColorScheme(.dark) will set the color to white.

Printing

This will also change the colour of the notification bar (time, battery, coverage, etc), so I wouldn't say it would be a valid solution, since the goal is to change the text colour of the search bar – Cowbell

I added an answer that takes this into account and only changes the color scheme (interface style) of the search bar itself: https://mcmap.net/q/1139434/-customize-quot-searchable-quot-search-field-swiftui-ios-15 – Tepefy