macOS 26 toolbar has wrong tint color sometimes in Dark Appearance

I have a SwiftUI Mac Catalyst app. I create a toolbar like this

        NavigationSplitView(columnVisibility: $sceneModel.columnVisibility, preferredCompactColumn: $preferredColumn) {
            sidebarView()
        } detail: {
            contentView()
                .toolbar {
                    ToolbarItemGroup(placement: .topBarTrailing) {
                        
                        
                        HStack {
                            
                            Button {
                                sceneModel.onMaps(sender: self)
                            } label: {
                                Image(systemName: "map")
                                    .font(.title2)
                            }
                            
                            Button {
                                sceneModel.onSearch(sender: self)
                            } label: {
                                Image(systemName: "magnifyingglass")
                                    .font(.title2)
                            }

                            ...
                        }
                    }
                }
        }

When my Mac Appearance is set to dark mode and the content under the toolbar is dark the toolbar looks good like this.

But then if I have light content under the toolbar, the glass effect changes to light, but the tint on the icons stays white instead of changing to black and it is hard to see the icon. It looks like this.

When I set the Appearance on my Mac to light, then the toolbar works just fine on both dark and light colored backgrounds.

Does anyone know how I can fix this when the appearance is Dark?

Answered by DTS Engineer in 860393022

Thanks for your post again.

This is an excellent response, and you have also provided the solution. It appears that Optimize for Mac may be causing the issue, as you mentioned. Let us proceed with filing a bug report for your project, and your detailed description will be invaluable in troubleshooting the problem.

Once you open the bug report, please post the FB number here for my reference.

If you have any questions about filing a bug report, take a look at Bug Reporting: How and Why?

Albert Pascual
  Worldwide Developer Relations.

Thank you for the post and the images as well as the code snippet. The background color is different but tint appear to remain unchanged. Could you please provide additional information regarding the Xcode version you are using to encounter this issue? Additionally, it seems that you are utilizing Catalyst. Could you also share the SwiftUI code that generates this issue, including all relevant version information, so that I can reproduce it?

If so, please share a link to your test project. That'll help us better understand what's going on. If you're not familiar with preparing a test project, take a look at Creating a test project.

Albert Pascual
  Worldwide Developer Relations.

The best would for you to define a TintColor in assets that have a colour value for light mode and another colour value for dark mode

I am using Xcode Version 26.0 (17A321). Here is a minimal project that demonstrates this behavior.

https://www.dropbox.com/scl/fi/97y801tdk4su6a419kar2/SwiftUIPlayground.zip?rlkey=5p1u5s0w9w9t5ytnilbdkgz00&st=ww6gnm6r&dl=0

Here is the code for this project, it just doesn't have the background images.

struct ContentView: View {
    @State var showLightContent = false
    let sidebarContent = ["Item 1", "Item 2", "Item 3"]
    @State var selectedItem: String? = nil
    @State private var columnVisibility = NavigationSplitViewVisibility.detailOnly
    
    var body: some View {
                     
            NavigationSplitView(columnVisibility: $columnVisibility) {
                // The sidebar
                List(sidebarContent, selection: $selectedItem) { item in
                    Text(item)
                }
            } detail: {
                ZStack {
                    Image(showLightContent ? "NaturalAtlas" : "MapBox")
                        .resizable()
                        .scaledToFill()
                        .ignoresSafeArea()
                    
                    VStack {
                        
                        Spacer()
                        
                        HStack {
                            Spacer()
                            
                            Button("Toggle Background") {
                                withAnimation {
                                    showLightContent.toggle()
                                }
                            }
                            .buttonStyle(.borderedProminent)
                            
                            Spacer()
                        }
                        
                        Spacer()
                            .frame(height: 20)
                    }
                    
                }
                .toolbar {
                    ToolbarItemGroup(placement: .topBarTrailing) {
                        HStack {
                            
                            Button {
                            } label: {
                                Image(systemName: "map")
                                    .font(.title2)
                            }
                            
                            Button {
                            } label: {
                                Image(systemName: "magnifyingglass")
                                    .font(.title2)
                            }
                            
                        }
                    }
                }
            }
            .navigationBarTitle("")
            .navigationBarBackButtonHidden(true)
        }
    
}

In this test project if you click on the "Toggle Background" button you will see this behavior.

Also, I found that the key to getting this to happen is having the "Mac Catalyst Interface" be set to "Optimize for Mac". When I change it to "Scaled to Match iPad" the toolbar gets the correct tinting.

Is this something I should file in the Feedback Assistant?

Accepted Answer

Thanks for your post again.

This is an excellent response, and you have also provided the solution. It appears that Optimize for Mac may be causing the issue, as you mentioned. Let us proceed with filing a bug report for your project, and your detailed description will be invaluable in troubleshooting the problem.

Once you open the bug report, please post the FB number here for my reference.

If you have any questions about filing a bug report, take a look at Bug Reporting: How and Why?

Albert Pascual
  Worldwide Developer Relations.

Thank you Albert. Here is the FB Number

FB20439311

Thank you for providing this information. I have reviewed the provided data and do not see a focused sample that can be used to reproduce the issue as described in the forums. I recommend that you provide a focused sample using the link provided to your FB number.

That'll help us better understand what's going on. If you're not familiar with preparing a test project, take a look at Creating a test project.

For more details on when you'll see updates to your report, please see What to expect after submission.

Albert Pascual
  Worldwide Developer Relations.

Sorry, I am not sure what happened with my original submission. There is now a file called MacToolbarIssue.zip attached the the submission that you can use to reproduce the issue. Just be sure to set your system appearance to Dark before building and running the app.

We got it now, thanks so much for uploading it! Give the team some time to take a look at all that great info!

Thanks,

Albert Pascual
  Worldwide Developer Relations.

macOS 26 toolbar has wrong tint color sometimes in Dark Appearance
 
 
Q