Introduction

Changing the appearance of a UITabBar is easy to do incorrectly because Apple’s APIs changed significantly in newer iOS versions. Older code often sets barTintColor and tintColor directly, while modern code should usually use UITabBarAppearance. The correct implementation depends on the iOS version you support and whether you want a global style or a single-tab-bar customization.

Know What Each Color Property Controls

Different properties affect different parts of the tab bar:

• 'tintColor controls the selected item color.'
• 'unselectedItemTintColor controls unselected item color.'
• Background appearance controls the bar’s visible background.

If you change only one of these, the result may look inconsistent.

Modern iOS Approach with UITabBarAppearance

For iOS 13 and later, UITabBarAppearance is the preferred API.

1import UIKit
2
3final class MainTabBarController: UITabBarController {
4    override func viewDidLoad() {
5        super.viewDidLoad()
6
7        let appearance = UITabBarAppearance()
8        appearance.configureWithOpaqueBackground()
9        appearance.backgroundColor = .systemIndigo
10
11        appearance.stackedLayoutAppearance.selected.iconColor = .white
12        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
13            .foregroundColor: UIColor.white
14        ]
15
16        appearance.stackedLayoutAppearance.normal.iconColor = .lightGray
17        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
18            .foregroundColor: UIColor.lightGray
19        ]
20
21        tabBar.standardAppearance = appearance
22        tabBar.scrollEdgeAppearance = appearance
23    }
24}

This approach is explicit and stable across most modern UIKit setups.

Older Direct Property Approach

For older iOS support or quick one-off styling, direct properties still appear in legacy code.

1tabBar.tintColor = .white
2tabBar.unselectedItemTintColor = .lightGray
3tabBar.barTintColor = .systemBlue
4tabBar.isTranslucent = false

This can still work, but modern appearance APIs are usually more predictable, especially when integrating with navigation bars and scroll-edge behavior.

Global Appearance Versus One Controller

If every tab bar in the app should look the same, you can configure UITabBar.appearance().

1let appearance = UITabBarAppearance()
2appearance.configureWithOpaqueBackground()
3appearance.backgroundColor = .black
4
5UITabBar.appearance().standardAppearance = appearance
6UITabBar.appearance().scrollEdgeAppearance = appearance
7UITabBar.appearance().tintColor = .systemYellow
8UITabBar.appearance().unselectedItemTintColor = .gray

Use this carefully. Global appearance rules affect every matching tab bar and can be hard to override later.

Transparent and Blurred Backgrounds

If you want a translucent or transparent look, do not just set a clear background color and hope for the best. Use the appearance configuration intentionally.

1let appearance = UITabBarAppearance()
2appearance.configureWithTransparentBackground()
3appearance.backgroundEffect = UIBlurEffect(style: .systemChromeMaterial)
4
5tabBar.standardAppearance = appearance
6tabBar.scrollEdgeAppearance = appearance

This produces more reliable results than mixing older tint properties with transparent colors.

Selected and Unselected Item Styling

Customizing background color alone is not enough. You usually need selected and unselected item colors that maintain contrast.

Poor contrast makes tab labels unreadable and hurts accessibility. Always test against light and dark content beneath the bar if the background is translucent.

Storyboard and Lifecycle Placement

Set tab bar appearance in a place that matches ownership:

• In a custom UITabBarController for controller-specific styling.
• In app startup for global styling.

Avoid scattering tab bar styling across child view controllers. That creates inconsistent behavior and makes debugging much harder.

Debugging Appearance Problems

If styling changes do not appear:

• Confirm the code runs before the tab bar is shown.
• Check whether another global appearance rule overrides your changes.
• Check scrollEdgeAppearance separately on newer iOS versions.

Many "not working" cases are actually standardAppearance and scrollEdgeAppearance not being configured consistently.

Common Pitfalls

• Changing only tintColor and expecting the whole tab bar background to change.
• Using legacy barTintColor code on modern iOS without checking appearance APIs.
• Setting standardAppearance but forgetting scrollEdgeAppearance.
• Applying styles in child controllers instead of the tab bar controller.
• Choosing colors with poor contrast for selected or unselected states.

Summary

• 'tintColor affects selected items, not the full bar background.'
• On modern iOS, prefer UITabBarAppearance over old direct color properties.
• Configure both standardAppearance and scrollEdgeAppearance for consistent results.
• Use global appearance only when the whole app truly shares one style.
• Test contrast and visibility, not just color assignment.