ios – Learn how to change toolbar title shade in SwiftUI when working on macOS Catalyst?

Your query has demonstrated that the modifier .toolbarColorScheme doesn’t work for Mac Catalyst when the deployment possibility “Optimize for Mac” is chosen.

Likewise, it appears that evidently the navigation title doesn’t get changed by a ToolbarItem with placement .principal when this deployment possibility is used.

So workarounds are wanted. Addressing a number of the points:

Making use of darkish mode

The modifier .preferredColorScheme(.darkish) does work for the entire view hierarchy. Nonetheless, this in all probability does not assist in your case, since you solely need to power the toolbar to make use of darkish shade scheme. If I perceive appropriately, you need the principle content material to make use of the colour scheme at the moment in operation.

Setting the toolbar background

The code proven within the query is setting the toolbar background to black utilizing the modifier .toolbarBackground. This method is now discouraged by Apple, ref. their greatest apply pointers for Toolbars:

Scale back using toolbar backgrounds and tinted controls. Any customized backgrounds and appearances you employ would possibly overlay or intervene with background results that the system gives. As a substitute, use the content material layer to tell the colour and look of the toolbar

In case you change the present code to set a blue background, as a substitute of black, you will notice that it does not work effectively on iPad (when working iPadOS 26). So in accordance with the rule, I might counsel making use of the background to the content material as a substitute.

The next method can be utilized to fill the background of the highest protected space inset solely:

mainContent
    .body(maxWidth: .infinity, maxHeight: .infinity)
    .background(alignment: .high) {
        Shade.blue
            .ignoresSafeArea()
            .body(top: 0)
    }

Exhibiting the title

To indicate a customized title with Mac Catalyst, the next works:

• cover the default title by making use of .toolbar(eradicating: .title)
• present the customized title as a ToolbarItem with placement .navigation
• cover the “shared background” behind the merchandise
• set the foreground model to white explicitly.

For iPad, no workarounds are wanted. So it’s possible you’ll have to think about using totally different implementations for iOS and Mac Catalyst. The put up Conditionally embrace macOS-only code in a SwiftUI (Mac Catalyst) venture? reveals methods of doing this.

Placing all of it collectively

Here’s a small instance that reveals a title in white on a blue background. It really works fairly constantly on each iPad and Mac Catalyst:

struct ToolbarModifiers: ViewModifier {
    func physique(content material: Content material) -> some View {
        #if targetEnvironment(macCatalyst)
            content material.toolbar(eradicating: .title)
        #else
            content material.toolbarColorScheme(.darkish, for: .navigationBar)
        #endif
    }
}

struct ContentView: View {
    let loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim advert minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    non-public var titlePlacement: ToolbarItemPlacement {
        #if targetEnvironment(macCatalyst)
            .navigation
        #else
            .principal
        #endif
    }

    var physique: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(0..<10) { _ in
                        Textual content(loremIpsum)
                            .font(.title3)
                    }
                }
                .padding()
            }
            .navigationTitle("Some Web page")
            .navigationBarTitleDisplayMode(.inline)
            .modifier(ToolbarModifiers())
            .toolbar {
                ToolbarItem(placement: titlePlacement) {
                    Textual content("Customized Title")
                        .foregroundStyle(.white)
                        .font(.title3)
                        .fontWeight(.semibold)
                }
                .sharedBackgroundVisibility(.hidden)
            }
            .body(maxWidth: .infinity, maxHeight: .infinity)
            .background(alignment: .high) {
                Shade.blue
                    .ignoresSafeArea()
                    .body(top: 0)
            }
        }
    }
}

iPad:

[

Mac Catalyst: