iPadOS 14 sidebar in dark mode is indistinguishable from content

Question

Created Jul ’20

Replies 5

Boosts 0

Views 3k

Participants 7

Hello,

When creating an app with side bar for iPadOS using SwiftUI, when in dark mode the color of the sidebar and the detail view is indistinguishable. When running in light mode the sidebar has a distinct color. Just build and run the Fruta sample app and you can notice the issue. I tried adding something like .background(Color.gray) to the list but it has no effect.
I compared with the Files app on iPad, and the side bar in that app is a grey color which clearly separates the side bar from the detail content.
Is this a known issue? Are there any customisation modifiers that can set the background color?

Thanks!
Best Regards,
Filip

Boost

Answer 1

ps3zocker OP

Jul ’20

You can use the configuration options to do this. I did it myself like this to mirror the behavior of the Files app.

Code Block  var configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
configuration.backgroundColor = .secondarySystemBackground
configuration.headerMode = .firstItemInSection
let layout = UICollectionViewCompositionalLayout.list(using: configuration)
collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout)
...

2

Answer 2

flaz OP

Jul ’20

I am not using UIKit, I am using SwiftUI and SidebarListStyle has no configurable init or properties.

0

Answer 3

thimic OP

Nov ’20

I’m having the same issue and haven’t yet found a workaround.

In addition I have a different issue with light mode where the background behind the sidebar navigation title is pure white instead of the light gray background behind the list below it.

Both of these are still present for me on Xcode 12.2.

0

Answer 4

phillipcaudell OP

Feb ’21

Also experieincing this issue. My workaround is to dip into UIKit and set the background colour manually. Set this on your sidebar:

Code Block language .onAppear {
    #if os(iOS)
    let rootViewController = UIApplication.shared.windows.first { $0.isKeyWindow }!.rootViewController
    guard
        let splitViewController = rootViewController?.children.first as? UISplitViewController,
        let sidebarViewController = splitViewController.viewController(for: .primary) else {
        return
    }
    let tableView = UITableView.appearance(whenContainedInInstancesOf: [type(of: sidebarViewController)])
    tableView.backgroundColor = .secondarySystemBackground
    #endif
}

Hopefully this is fixed properly soon. Feedback also submitted to Apple (FB9006825).

1

Answer 5

Jonathan T. OP

Jan ’22

As of iPadOS 15, this issue has still not been resolved by Apple. Good news though! The developer community has made a swift package called SwiftUI-Introspect.. After adding the package to your project (which they say is built to use in Production apps, not just for development purposes), import Introspect in your SwiftUI view and at the end of your sidebar list, add this modifier:

           List {
                NavigationLink(destination: DemoView()) {
                    Text("Demo")
                }
            }
            .listStyle(.sidebar)
            .navigationTitle("Demo")
            .introspectTableView { inspect in
                inspect.backgroundColor = .secondarySystemBackground
            }

Unlike other methods, this method only applies the .secondarySystemBackground to the sidebar and not the Main or Secondary Views!

1