Changing navigation bar color in Swift
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
Changing a navigation bar color in Swift is easy, but the correct API depends on the iOS generation you target. Older code used barTintColor, tintColor, and titleTextAttributes directly on UINavigationBar. Modern iOS apps should usually configure a UINavigationBarAppearance, because it gives consistent results across standard, scroll-edge, and compact appearances.
The Modern iOS 13+ Approach
For current UIKit code, create a UINavigationBarAppearance and assign it to the navigation item or navigation bar.
This changes the bar background, title color, and button tint color in a way that survives modern appearance transitions.
What Each Property Affects
A navigation bar has several visual layers:
- '
backgroundColoron the appearance controls the bar background' - '
tintColorcontrols bar button items and back indicators' - '
titleTextAttributescontrols the title text' - '
largeTitleTextAttributescontrols the large title style'
If you set only one of these, the bar may look partially customized rather than fully themed.
Apply It Globally If the App Uses One Theme
If the whole app should share one navigation style, configure the appearance proxy during app startup.
This keeps the styling centralized and avoids repeating the same code in every controller.
Per-Screen Overrides Still Work
If one screen needs a special navigation style, set its appearance in that view controller instead of using the global proxy. This is useful for onboarding flows, modal stacks, or branded feature areas that intentionally differ from the rest of the app. The key is to be explicit, because a per-screen override can otherwise appear to "fight" the app-wide theme.
Older barTintColor Code Still Appears
You will still see legacy examples like this:
That approach worked in older UIKit versions, but UINavigationBarAppearance is now the more reliable API, especially for large titles and scroll-edge behavior.
Dark Mode and Semantic Colors
If the app supports light and dark mode, prefer semantic colors or explicitly define both variants.
Or provide your own named asset colors if the design requires a branded palette.
The important part is testing both themes. A bar that looks good in light mode can become unreadable in dark mode if title and tint colors are not set deliberately.
Common Pitfalls
- Setting only
tintColorand expecting the navigation bar background color to change. - Using old
barTintColorexamples in modern UIKit without configuringUINavigationBarAppearance. - Forgetting
scrollEdgeAppearance, which makes the bar revert to a different style during scrolling. - Styling one view controller locally when the whole app really needs a centralized appearance configuration.
- Choosing colors that reduce title or bar button contrast, especially in dark mode.
Summary
- In modern Swift UIKit code, prefer
UINavigationBarAppearancefor navigation bar color changes. - Set the background color, title attributes, and tint color together for a complete theme.
- Apply the appearance globally when the whole app shares one navigation style.
- Legacy
barTintColorcode still exists, but it is not the best default for newer iOS versions. - Test the result with large titles, scroll-edge behavior, and dark mode enabled.

