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 and a smaller toolbar height.

This is the look that's been used in the past if your window was configured to hide the window's title.

In Big Sur, this style now supports an optional inline title.

You may choose to use this style when the user's focus is primarily on the content of the window and your toolbar isn't heavily populated.

The new preference style is specifically designed for the preference window of your app. It complements the selectable icons in the toolbar, giving them similar sizes and centering them, which gives a nice, uniform look to the window.

Now, what's really cool is that this preference style will be used without any adoption if you're using an NSTabViewController with the toolbar TabStyle.

Start using this class for your preference window, if you aren't already, because it makes switching tabs really easy and gives you this new look for free.

The expanded style is one you may be familiar with because it used to be the standard layout of the toolbar.

Notice how the title of the window is placed on top of the toolbar and the title can expand across the window if necessary.

This style is recommended when your window title is long or your toolbar is heavily populated by items. It's also a good choice if you need to maintain compatibility with your existing toolbar construction.

Finally, we have the automatic style, which will use your window structure to determine which style to choose.

This is the default value and will maintain existing layout for your pre-Big Sur linked apps.

Controls in the toolbar also have a brand-new design requiring absolutely no adoption.

Notice how they no longer show a border behind them during normal usage.

But when the mouse is hovered over the control, we see the border pop back in, giving some nice visual feedback.

While most controls won't have any border around them, controls with text will have a stroke border surrounding the edge of the control.

This helps define which areas of the toolbar are empty and will allow dragging the window.

Another change affecting controls is the new large size used by the unified toolbar style.

You'll find both the control, as well as the icon, to be larger and use a heavier weight.

Because of this new control size, you may find some of your buttons to have clipping on one or more sides.

This is likely because the min and maxSizes defined on the ToolbarItem are now too small.

These properties are being deprecated in favor of letting AppKit measure your views automatically.

This has been possible since Mojave, so in most cases, you can remove those calls entirely. It's the easiest kind of adoption.

Of course, you can use constraints if you need more control over the size of the items.

You may have already noticed another enhancement to the inline title and the toolbar.

Mail has displayed the unread message count right under the window title, in a smaller font.

This is made possible by the new subtitle property on NSWindow.

This is a great way to display secondary text, like an unread count.

In the unified toolbar style, you will see this text placed below the primary title, which saves a lot of space.

Using this in the expanded style will place the subtitle next to the primary title, separated automatically.

And speaking of the window title, if your toolbar contains controls, such as back and forward, these items belong to the leading edge of the window.

With the new navigational property on NSToolbarItem, you can specify these items and the system will take care of the rest.

Navigation items have special behavior when customizing the toolbar as well. These items can be customized into and out of the toolbar, but they can't be moved out of this title-leading position.

One specific control in the toolbar which is getting an all-new experience is the search control.

When the window is large enough, the full search field is shown as normal, but when the window is compressed down, the search field is collapsed down into a button.

Clicking this button will expand the search field back out.

This ensures that search is always available no matter the size of the window.

Now, to accomplish this behavior, a new item has been added, called the NSSearchToolbarItem.

This item has been designed to make adoption as easy as possible, allowing you to keep your existing search field.

Here's some existing code you may have in your app.

Adoption of the new search item can be done in as little as two steps.

First, change the class of the item to be an NSSearchToolbarItem.

Next, rather than setting the item's View property, instead set the item's searchField property.

And with those two small changes, you have a brand-new search experience.

In Interface Builder, you'll find that a search item has been added to the object Catalog.

The really amazing part is that this object maintains backwards compatibility.

When your app is run on an older system, a standard search field will be used just as it is today. There's no need to do any run-time checks.

And with just a few code changes, you've adopted full-height sidebars, a brand-new toolbar style and adjusted the layout of the items. Many of these features require no changes at all.

But you can take adoption to the next level, making your window take full advantage of the new look of macOS.

Consider the Mail app.

Notice how there are items in the toolbar that align with sections of content in the window.

The dividers of the split view reach up to the top of the window, creating these beautiful full-height sections.

As the dividers are resized, the toolbar items follow.

This gives useful context to the controls, showing what content they will act on.

Now, just because adoption of these toolbar sections goes the extra mile doesn't mean it requires a lot of work. They're created using the new NSTrackingSeparatorToolbarItem. Each item is configured to track a specific divider, and the toolbar does the rest.

During customization, these sections are not removable, but the content of the sections can be customized.

Creating one of these items requires just one line of code.

Create the item using the constructor and assign it a split view to track and specify which divider of that split view it should be aligned with.

If you don't have access to the split view during the item's creation, that's okay.

Just assign it before the window is shown.

You can also use this new tracking item to place controls over a full-height sidebar.

To make this easier, AppKit has added a new standard item identifier, which will discover the full-height sidebar automatically.

Toolbar items placed before the separator will appear over the full-height sidebar.

You may have noticed that the toolbar doesn't have a divider below it anymore. But that's not always true though.

A shadow will automatically appear between the toolbar and scrolled content to create a visual pocket where the content trails off.

This happens in each section of the window with a scroll view.

In order to see this behavior, make sure your scroll view completely fills the frame of the section.

You'll also need to be using the full-size content mask that we talked about earlier. Otherwise, you'll see a separator regardless of whether or not content is scrolled.

If you'd like to explicitly request a separator instead of the scroll shadow, or maybe have no separator at all, you can do that using the titlebarSeparatorStyle on each split view item.

This will allow you to specify which sections get the scrolling pockets and which should not.

Or you can specify a style on the window as a whole.

Note that the style on the window will supersede any styles defined by split view items.

If you want control of the style to be in the hands of the items, make sure the window style is set to "automatic." Now, we've talked about some really striking window-level features of the new design.

These features have been baked directly into NSToolbar and NSSplitViewController. If you aren't already taking advantage of those classes, now is a great time to let the system start doing the heavy lifting for you.

And that's it for setting up your window for success. Next, Jeff Nadeau will guide you through some exciting enhancements to controls.

Thanks, John. Now that you've refined your window structure, let's look at what macOS Big Sur brings to the controls inside your app.

System controls have taken on a new and modern design in Big Sur, and AppKit provides all of these updates to your app automatically.

But there are a few control updates we think you'll be especially excited about, and the first is an update to accent colors.

You're probably familiar with the family of accent colors that are available on macOS. These colors affect all kinds of UI elements, including controls, selection backgrounds, focus rings and more.