Saturday, June 6, 2026
HomeiOS DevelopmentSwiftUI navigation bar button color changes depending on whether the root view...

SwiftUI navigation bar button color changes depending on whether the root view is a ScrollView or VStack


I have a SwiftUI view inside a NavigationStack with a custom navigation bar background color. I want the navigation bar buttons to have a consistent color throughout the app.

The issue is that the navigation bar button color changes depending on the first/root view in the body.

When the root view is a ScrollView, the navigation bar buttons appear white:

    var body: some View {
        
        ScrollView {}
            .toolbarBackground(Color(red: 0.02, green: 0.27, blue: 0.13), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarColorScheme(.dark, for: .navigationBar)
    }

SwiftUI navigation bar button color changes depending on whether the root view is a ScrollView or VStack

However, if I replace the ScrollView with a VStack, while keeping the same modifiers, the navigation bar buttons appear black:

    var body: some View {
        
        VStack {}
            .toolbarBackground(Color(red: 0.02, green: 0.27, blue: 0.13), for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarColorScheme(.dark, for: .navigationBar)
    }
}

Without ScrollView

The only change is the root view type. The navigation bar background color is the same, and the same modifiers are applied.

Is there a way to make the navigation bar button color consistent across different root views?

For example, should the modifier be applied to the NavigationStack, the root content view, or each individual screen? Or is there another SwiftUI modifier / UIKit appearance setting needed to force the navigation bar button color?

How can I make the navigation bar buttons stay the same colour in both cases?

RELATED ARTICLES

Most Popular

Recent Comments