This is my design in Sketch:
Sketch says that the blue color is 70,164,239.
So I have the following code for my tab:
UINavigationBar.appearance().barTintColor = UIColor(red: 70.0/255.0, green: 164.0/255.0, blue: 239.0/255.0, alpha: 1.0)
UINavigationBar.appearance().tintColor = UIColor.clearColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]
And the following for the view underneath (inside an action):
self.two_buttons_view.backgroundColor = UIColor(red: 70.0/255.0, green: 164.0/255.0, blue: 239.0/255.0, alpha: 1.0)
But look what's going on, the Navigation Bar color is always a little lighter than the color of the view. With this light blue there's only a slight difference but if I go with a darker blue it gets much more noticeable. It appears that the navigation bar's colors are never as rich as the rest of pages views are:
In iOS13 the default appearance of the large title style navigation bar has changed from translucent to transparent. Nothing changes much in a plain style table view, the navigation bar will show the color of a table view, in this case, white.
The navigation bar's barTintColor is the color of the bar itself. This color will shift slightly if translucency is enabled. The tintColor property specifies the tint color of bar button items when contained in the navigation bar. Oh, gotcha.
But no, tintColor doesn't really have anything to do specifically with transparent bars. You are supposed to take transparency into account when choosing the tint color, as described in the iOS Human Interface Guidelines barTintColor on the navigation bar is equivalent to tintColor pre-iOS 7
Few apps on the iPhone give you ways to change their color scheme aside from Dark Mode in iOS 13 and later, but that doesn't mean you can't give an app a new color theme or filtered look. With the Shortcuts app in iOS 14 and later, it's totally possible, and it'll work in practically any app.
The tintColor
is a tint color. It combines with the translucency (is that a word?) of the bar, along with what's behind the bar, to give some other resulting color.
If you want full control over the actual color of a navigation bar, set its translucent
to false
and then give it a background image consisting of a rectangle of the desired color - and no tint color.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With