Incorrect color for inline navigation bar title when dark mode AND reduce transparency ON.

Question

Created 3w

Replies 5

Boosts 0

Participants 4

I reproduced this in iPhone 17 and iPhone 17 Pro simulators running iOS 26.0

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack {
                    ForEach(0..<100) { i in
                        Text("Row \(i)")
                            .frame(maxWidth: .infinity)
                    }
                }
                .padding()
            }
            .navigationTitle("Toolbar Test")
            .navigationBarTitleDisplayMode(.inline) // or .automatic
        }
    }
}

Run this code in a vanilla SwiftUI app.
Toggle the appearance to dark mode.
In the simulator's Settings app -> Accessibility -> Display and Text Size. Turn ON "Reduce Transparency".
Go back to the app and start scrolling if you need to.

You can observe that the title is unreadable - black text on a black navigation bar.

Boost

Answer 1

DTS Engineer OP

Apple

3w

Could you please open a bug report and post the FB number here once you do. Bug Reporting: How and Why? has tips on creating your bug report.

0

Answer 2

Tomato OP

3w

You can customize the title text color and the background color of the navigation bar like the following for a workaround.

import SwiftUI

struct ContentView: View {
	@Environment(\.colorScheme) var colorScheme
	
	var body: some View {
		NavigationStack {
			VStack {
				Image(systemName: "globe")
					.imageScale(.large)
					.foregroundStyle(.tint)
			}
			/*
			.navigationBarItems(
				trailing: Text("Trailing").foregroundStyle(.yellow)
			)
			*/
			.navigationBarTitleDisplayMode(.inline)
			.toolbar {
				ToolbarItem(placement: .principal) {
					Text("GGGGGGG")
						.font(.title)
						.bold()
						.foregroundColor(colorScheme == .light ? .white : .black)
				}
			}
			.toolbarBackground(colorScheme == .light ? .black: .white, for: .navigationBar)
			.toolbarBackground(.visible, for: .navigationBar)
		}
	}
}

0

Answer 3

Tomato OP

3w

You can customize the title text color and the background color of the navigation bar like the following for a workaround.

import SwiftUI

struct ContentView: View {
	@Environment(\.colorScheme) var colorScheme
	
	var body: some View {
		NavigationStack {
			VStack {
				Image(systemName: "globe")
					.imageScale(.large)
					.foregroundStyle(.tint)
			}
			/*
			.navigationBarItems(
				trailing: Text("Trailing").foregroundStyle(.yellow)
			)
			*/
			.navigationBarTitleDisplayMode(.inline)
			.toolbar {
				ToolbarItem(placement: .principal) {
					Text("GGGGGGG GGGGGGG")
						.font(.title)
						.bold()
						.foregroundColor(colorScheme == .light ? .white : .black)
				}
			}
			.toolbarBackground(colorScheme == .light ? .black: .white, for: .navigationBar)
			.toolbarBackground(.visible, for: .navigationBar)
		}
	}
}

0

Answer 4

Furthermoore OP

3w

FB20349817

1

Answer 5

JBo2 OP

2w

I came across the same bug: When in .dark mode AND reduced transparency, OS picks in the assets the Any Luminosity variant instead of the dark one for the inline title (not the large title).

I have a Color with 4 variants: light/dark x normal/high-contrast. I apply it to navigationTitle with a UIKit function: .onAppear { setTitleMyColor(.text) } // apply TextColor from the assets

And I used the following workaround in this UIKit function:

import UIKit
import SwiftUI
/// A function relying on UIKit to force the navigation title color
@MainActor func setTitleUIColor(_ color:UIColor) {
    // iOS bug workAround: if reducedTransparency and dark mode are both enabled,
    // For the inline title only (not the largeTitle)
    // iOS picks in the assets the Any Luminosity variant instead of the dark one
    let colorFixed = UIAccessibility.isReduceTransparencyEnabled ?
        .systemGray: color
    let appearance = UINavigationBarAppearance()
    
    appearance.titleTextAttributes = [.foregroundColor: colorFixed]
    appearance.largeTitleTextAttributes = [.foregroundColor: color]
    UINavigationBar.appearance().standardAppearance = appearance
}

@MainActor func setTitleMyColor(_ myColor: Color = .accent) {
    let titleColor = UIColor(myColor)
    setTitleUIColor(titleColor)
}

0