System grouped background color on Mac Catalyst is incorrect for Light Mode

Question

I'm trying to recreate the same look and feel like the settings app on iOS in a Catalyst App.

I got a SplitViewController with a TableViewController set up as Grouped as Master and a TableViewController set up as Inset Grouped as Detail.

For the Table Views I've set the background color to System Grouped Background Color and for the Table View Cells I've set the background color to Secondary System Grouped Background Color.

Everything looks as expected on all devices (iOS / Mac) except for light mode on the Mac. It looks like the colors are inverted. The Table View should have the light grey background color and the Table View Cell should have a white background color but it's the other way around.

Is this default Mac behaviour or is something wrong?

I created a sample project on GitHub:
https://github.com/robertveringa89/systemgroupedbackgroundcolor

Answer 1

Seems to be a bug or intended behavior on macOS. I'm guessing it's a bug. But you can easily define your own colors with correct colors in a UIColor extension:

extension UIColor {
    static var systemGroupedBackground2: UIColor {
        UITraitCollection.current.userInterfaceStyle == .light ?
            UIColor(hex: "F2F2F7FF") :
            UIColor(hex: "000000FF")
    }

    static var secondarySystemGroupedBackground2: UIColor {
        UITraitCollection.current.userInterfaceStyle == .light ?
            UIColor(hex: "FFFFFFFF") :
            UIColor(hex: "1C1C1EFF")
    }
}

Answer 2

I ran into the same issue. I'm not sure if it is a bug, or a weird design decision on Apple's part. However, a fairly easy workaround is to create custom colors in an asset catalog that use the default colors on iPhone and iPad, but custom colors on macOS Catalyst.

Just create a color, like aGroupedBackgroundColor, make sure "Universal, iPad, Mac Catalyst" are all selected under Devices, and set appearance to "Any, Dark"

Then you can assign system colors to everything except for the macOS Catalyst light appearance. For example, for the table background, assign the "groupTableViewBackgroundColor" to all the light and dark appearances, except for Mac Catalyst Light appearance, assign "System Gray 6 Color".

Then, you can assign your aGroupedBackgroundColor in interface builder to your table view backgrounds, or reference it in code like so: UIColor(named: "aGroupedBackgroundColor")

Here's an image asset catalog example