Modify the default gradient background of toolbar in iOS26

Question

Created 3d

Replies 1

Boosts 0

Participants 2

In the new iOS 26 design, the navigation bar and tab bar will have a dark gradient background. We found that the color of this gradient depends on the background color of the page. For example, in the following page, our background color is green, so the navigation bar and tab bar will change the gradient to green. Simulator Screenshot - iPhone 16 Pro - 2026-01-05 at 16.37.46.png

Is there any way to change this gradient color?

I tried .toolbarBackground(.hidden, for: .navigationBar), but does not work。

I tried .toolbarBackground(LinearGradient(colors: [.black.opacity(0.4), .black.opacity(0)], startPoint: .top, endPoint: .bottom), for: .navigationBar), but it looks like the default gradient is the superposition of the gradient I defined, not a replacement.

截屏2026-01-05 16.48.09.png

Boost

Answer 1

DTS Engineer OP

Apple

1d

The gradient comes from the .background of the parent ScrollView. I am able to change the gradient behind the navigation bar using the following code:

struct TabContent: View {

    var gradientColor: Color

    var body: some View {

        ScrollView{
            ListView()
        }
        .ignoresSafeArea()
        .background(gradientColor)
    }
}

 Travis Trotto - DTS Engineer

0