Toolbar Color Scheme Modifier

The Toolbar Color Scheme modifier specifies the preferred color scheme of a Navigation and/or Tab Bar.

Overview

By default, a Toolbar’s color automatically adapts to a user’s display settings, switching between Light and Dark Mode.

You can override this behavior by configuring the color scheme to stay fixed in either Light or Dark Mode, regardless of a user’s display settings, with the Toolbar Color Scheme modifier.

You can customize the color scheme of your Navigation Bar, Tab Bar, or both from the Inspector panel.

Application

To change the Toolbar color scheme of a navigation layer, apply the Toolbar Color Scheme modifier to a child in a Navigation Stack.

If you have both a Tab Bar and a Navigation Bar and you want to apply different settings to each one, add the Toolbar Color Scheme modifier twice to configure them separately.

<div class="callout note">Note
‍If you want a consistent Toolbar color scheme across all of the screens in your Tab Bar, you must apply the Toolbar Color Scheme modifier to each one.</div>