Adopt the new look of macOS

Hello and welcome to WWDC.

Hello and welcome to Apple Park. My name is John Tegtmeyer, and I'm an engineer working on AppKit. Later today, I'll be joined by my colleague Jeff Nadeau, and we're both really excited to walk you through the new look of macOS. As you may have seen, macOS has an all-new design...

which includes a dramatic update to the appearance and structure of Mac apps, including full-height sidebars with colorful icons and updated symbol iconography.

An all-new toolbar with inline title, big bold controls and integration with the split-view sections below.

And an updated appearance for lists of content, featuring a new inset selection style.

Now, this is a big change, and you might be wondering what it means for your app.

The great news is that many of these design changes happen automatically.

With the frameworks doing the heavy lifting, your native Mac app will look great on macOS Big Sur out of the box.

But with a bit of adoption, you can go the extra mile and really shine. And that's what we're here to talk about today. This new design is broken down into three main sections.

First, updates to the structure of your window, elements like the sidebar and toolbar, which will set your app up for success.

Next is some great new features in the line of controls.

And finally, symbol images, which have come to macOS.

Let's start things off with the updates to sidebars and toolbars.

Perhaps one of the most eye-catching updates is the beautiful new full-height sidebar, seen here in Mail.

Your app may get this for free just by building on Big Sur, and that's because it takes advantage of existing APIs.

Specifically, make sure your sidebar is built using an NSSplitViewController, and the SplitViewItem is configured using the sidebar behavior.

The second piece of API is the fullSizeContentView window mask.

This will allow content to be laid out under the space normally reserved for the title bar.

If you're not already taking advantage of the fullsizeContentView style, it's even easier to adopt in macOS Big Sur.

NSView now exposes several different ways to find the safe area of your View.

These new safe areas are also available to you through Interface Builder.

Just check the new box in the Size Inspector for Safe Area Layout Guide.

Then you'll find a Safe Area Layout Guide in your View, ready to use.

If you're creating a new Mac app in Interface Builder, there's a neat object in the Catalog that creates a preconfigured sidebar.

This will set up a split view controller with a sidebar and automatically adjust your window for the fullsizeContentView. No extra configuration is required.

In rare circumstances, you may not want a full-height sidebar.

There's a new property on NSSplitViewItem which will allow you to opt out.

You may consider this if your sidebar is typically collapsed or if your toolbar is crowded and you need more space.

But please note that this property only affects items with the sidebar behavior.

The sidebar has also gained a splash of color with new colorful icons.

By default, all sidebar icons are colored with the accent color, but there's a new NSOutlineViewDelegate method that you can use to customize it.

The delegate method returns an instance of NSTintConfiguration, which offers a few different types of tint.

The first is the default configuration, which uses the accent color.

The monochrome option provides a colorless appearance similar to the sidebar icons in Catalina.

PreferredColor allows you to specify a color that should be used with the default accent color, but should change to follow the accent color if it's customized.

For example, Mail's teal folders complement the default accent color of blue nicely, but would clash with a red accent.

Finally, fixedColor specifies a color that never changes.

A great example is Mail's VIP folder, which is always a yellow star.

You can use this feature to distinguish the sections of your sidebar in whatever way makes sense for your app.

You can also use it to strongly associate a color with a particular item, or use the monochrome option to de-emphasize the secondary groups in your sidebar in order to draw focus towards what's important.

Next, I'd like to call your attention to the toolbar.

Toolbars have a brand-new design in Big Sur.

Notice how there's no longer any visible material behind the items. Instead, it looks uniform with the content of the window. This is something you'll get automatically.

In addition to the new visual appearance of the toolbar, there are also many new styles of toolbars. Each has been purpose-built to either make an impactful presence in the window or scale back and allow the content to take focus.

There's a new property on NSWindow called toolbarStyle, which controls these new looks.

First is a unified style, which is the new standard look of toolbars.

This style emphasizes the controls in the toolbar.

See how they're larger and the icons are bold.

It also supports the new inline title, which is placed at the leading edge of the toolbar, next to the sidebar.

As this is the new standard look of the toolbar, it's a good choice for most windows that don't meet requirements from the other styles.

Its larger controls and streamlined title can help your app look great in the new look of macOS.

A variation of the unified style is the unified compact style.

This style has a more compressed layout with regular-sized controls